create a div that scrolls horizontally and adjust the height of its content to always be 80% of the screen height in javascript

You can achieve this by first creating a div element in HTML with an id attribute:


<div id="scrollDiv"></div>
27 chars
2 lines

Then, you can use CSS to style the div element to be the height of the screen and have a horizontal scroll with overflow-x:


#scrollDiv {
  height: 80vh;
  overflow-x: scroll;
  white-space: nowrap;
}
76 chars
6 lines

Next, you'll need to add content to the scrollDiv dynamically using JavaScript. You can do this by selecting the scrollDiv using its id and appending child elements to it:


index.tsx
const scrollDiv = document.getElementById("scrollDiv");

// generate content to add to scrollDiv
const content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo dictum commodo. Nulla elementum ultricies massa in malesuada. Vestibulum mattis diam faucibus feugiat placerat. Aenean vehicula risus non quam consequat, nec gravida ipsum rhoncus. Suspendisse vel purus ut est tincidunt bibendum. Sed dignissim ut justo ac accumsan. Donec sed cursus dui. Proin scelerisque leo eget fringilla fringilla. Nunc molestie justo eget enim vulputate faucibus. Morbi vel pulvinar lacus, quis efficitur dolor.";

// create a child element to append to the scrollDiv for each line of content
content.split("\n").forEach(line => {
  const div = document.createElement("div");
  div.innerText = line;
  scrollDiv.appendChild(div);
});
839 chars
12 lines

Finally, you'll want to resize the height of the scrollDiv to always be 80% of the screen height when the window is resized using the window.addEventListener method:


index.tsx
function resizeScrollDiv() {
  const screenHeight = window.innerHeight;
  scrollDiv.style.height = `${screenHeight * 0.8}px`;
}

window.addEventListener("resize", resizeScrollDiv);
181 chars
7 lines

This will ensure that the scrollDiv adjusts its height dynamically as the window size changes.

similar javascript code snippets

create a carousel in html in javascript

create a div that scrolls horizontally and adjust its height to always be 80% of the screen height in javascript

center a div in javascript

blue coloured cta in javascript

create a button in javascript

scroll snap in javascript

how to toggle a class on an element in javascript

convert div to image in javascript

scroll to top in javascript

how to remove a class from an element in javascript

related categories