Unable to scroll horizontally beyond 200 viewport widths

Question

Unable to scroll horizontally beyond 200 viewport widths

I'm facing an issue with my code that switches between vertical and horizontal scrolling but seems to have a width limit of 200vw. When I set the min-width to 50vw, only 4 sections are visible, whereas setting it to 100vw (as shown in the example) displays only 2 sections.

I can't seem to display anything over 200vw, and I'm not sure why that is or how to fix it. Here's the code snippet:

let lastKnownScrollPosition = 0;
        let deltaY = 0;

        window.addEventListener("scroll", wheelHandler);
        
        document.querySelectorAll('.sticky-container').forEach(function(container) {
            const stikyContainerHeight = (container.querySelector('main').offsetWidth + window.innerHeight);
            container.setAttribute('style', 'height: ' + stikyContainerHeight + 'px');
        });
        

        function isElementInViewport(el) {
            const rect = el.getBoundingClientRect();
            return rect.top <= 0 && rect.bottom > document.documentElement.clientHeight;
        }

        function wheelHandler(event) {

            deltaY = window.scrollY - lastKnownScrollPosition;
            lastKnownScrollPosition = window.scrollY;


            const containerInViewPort = Array.from(document.querySelectorAll('.sticky-container')).filter(function(container) {
                return isElementInViewport(container);
            })[0];

            if (!containerInViewPort) {
                return;
            }

            var isPlaceHolderBelowTop = containerInViewPort.offsetTop < document.documentElement.scrollTop;
            var isPlaceHolderBelowBottom = containerInViewPort.offsetTop + containerInViewPort.offsetHeight > document.documentElement.scrollTop;
            let g_canScrollHorizontally = isPlaceHolderBelowTop && isPlaceHolderBelowBottom;


            if (g_canScrollHorizontally) {              

                containerInViewPort.querySelector('main').scrollLeft +=  deltaY;

            }
        }

html,
    body {
        margin: 0;
        font-family: sans-serif;
    }

    .vertical-section {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    main {
        overflow-x: hidden;
        display: flex;
        position: sticky;
        top: 0;
    }

    h1 {
        margin: 0;
        padding: 0;
    }

    section {
        min-width: 100vw; /*Works perfectly when it's 50vw*/
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 4ch;
    }

    section:nth-child(even) {
        background-color: teal;
        color: white;
    }

<div class="vertical-section">
        Content Before
    </div>
    <div class="sticky-container">
        <main>
            <section>
                <h1>First</h1>
            </section>
            <section>
                <h1>Second</h1>
            </section>
            <section>
                <h1>Third</h1>
            </section>
      <section>
                <h1>Fourth</h1>
            </section>
      <section>
                <h1>Fifth</h1>
            </section>
            <section>
                <h1>Last</h1>
            </section>
        </main>
    </div>
    <div class="vertical-section">
        Content After
    </div>

I need help understanding this issue and finding a solution. Can anyone assist me?

javascript html css

Answer 1

Answer №1

When scrolling along the Y axis => up/down, the distance of scroll from left to right, or the X axis, is determined by the height you are calculating in the forEach loop for stikyContainerHeight.

For instance, if your container is 500px wide using the 100vw css rule, and there are a total of 6 elements with 5 extending beyond the fold on the right side, this would amount to (500px * 6 = 3000px). To display all 3000px when scrolling down in height, the height must match in pixels. You can sum up the widths of the main section's children elements or multiply the screen width by the number of parent sections' children.

The scrollable height should only add enough distance to scroll two divs on the X axis. If you want to scroll the entire distance, find the width of the whole parent element, multiply it by the sections being scrolled, and apply it to the stikyContainerHeight variable.

let lastKnownScrollPosition = 0;
let deltaY = 0;

// changed to a single query
const main = document.querySelector('.sticky-container'); 

// get the section elements so we can use its nodelist arrays length
const sec = document.querySelectorAll('.sticky-container section'); 

window.addEventListener("scroll", wheelHandler);

// no need for the forEach loop as there is only one element witht he class sticky-container
const stikyContainerHeight = main.getBoundingClientRect().width * sec.length;
main.setAttribute('style', 'height: ' + stikyContainerHeight + 'px');

// everything below here is the same
function isElementInViewport(el) {
  const rect = el.getBoundingClientRect();
  return rect.top <= 0 && rect.bottom > document.documentElement.clientHeight;
}

function wheelHandler(event) {

  deltaY = window.scrollY - lastKnownScrollPosition;
  lastKnownScrollPosition = window.scrollY;


  const containerInViewPort = Array.from(document.querySelectorAll('.sticky-container')).filter(function(container) {
    return isElementInViewport(container);
  })[0];

  if (!containerInViewPort) {
    return;
  }

  var isPlaceHolderBelowTop = containerInViewPort.offsetTop < document.documentElement.scrollTop;
  var isPlaceHolderBelowBottom = containerInViewPort.offsetTop + containerInViewPort.offsetHeight > document.documentElement.scrollTop;
  let g_canScrollHorizontally = isPlaceHolderBelowTop && isPlaceHolderBelowBottom;


  if (g_canScrollHorizontally) {

    containerInViewPort.querySelector('main').scrollLeft += deltaY;

  }
}

html,
body {
  margin: 0;
  font-family: sans-serif;
}

.vertical-section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

main {
  overflow-x: hidden;
  display: flex;
  position: sticky;
  top: 0;
}

h1 {
  margin: 0;
  padding: 0;
}

section {
  min-width: 100vw;
  /*Works perfeclty when it's 50vw*/
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4ch;
}

section:nth-child(even) {
  background-color: teal;
  color: white;
}

<div class="vertical-section">
  Content Before
</div>
<div class="sticky-container">
  <main>
    <section>
      <h1>First</h1>
    </section>
    <section>
      <h1>Second</h1>
    </section>
    <section>
      <h1>Third</h1>
    </section>
    <section>
      <h1>Fourth</h1>
    </section>
    <section>
      <h1>Fifth</h1>
    </section>
    <section>
      <h1>Last</h1>
    </section>
  </main>
</div>
<div class="vertical-section">
  Content After
</div>

You can also iterate over the sections themselves and sum up their values in a forEach loop.

let stikyContainerHeight = Number();

sec.forEach(s => stikyContainerHeight += s.getBoundingClientRect().width);

main.setAttribute('style', 'height: ' + stikyContainerHeight + 'px');

Answer 2

When scrolling along the Y axis => up/down, the distance of scroll from left to right, or the X axis, is determined by the height you are calculating in the forEach loop for stikyContainerHeight.

For instance, if your container is 500px wide using the 100vw css rule, and there are a total of 6 elements with 5 extending beyond the fold on the right side, this would amount to (500px * 6 = 3000px). To display all 3000px when scrolling down in height, the height must match in pixels. You can sum up the widths of the main section's children elements or multiply the screen width by the number of parent sections' children.

The scrollable height should only add enough distance to scroll two divs on the X axis. If you want to scroll the entire distance, find the width of the whole parent element, multiply it by the sections being scrolled, and apply it to the stikyContainerHeight variable.

let lastKnownScrollPosition = 0;
let deltaY = 0;

// changed to a single query
const main = document.querySelector('.sticky-container'); 

// get the section elements so we can use its nodelist arrays length
const sec = document.querySelectorAll('.sticky-container section'); 

window.addEventListener("scroll", wheelHandler);

// no need for the forEach loop as there is only one element witht he class sticky-container
const stikyContainerHeight = main.getBoundingClientRect().width * sec.length;
main.setAttribute('style', 'height: ' + stikyContainerHeight + 'px');

// everything below here is the same
function isElementInViewport(el) {
  const rect = el.getBoundingClientRect();
  return rect.top <= 0 && rect.bottom > document.documentElement.clientHeight;
}

function wheelHandler(event) {

  deltaY = window.scrollY - lastKnownScrollPosition;
  lastKnownScrollPosition = window.scrollY;


  const containerInViewPort = Array.from(document.querySelectorAll('.sticky-container')).filter(function(container) {
    return isElementInViewport(container);
  })[0];

  if (!containerInViewPort) {
    return;
  }

  var isPlaceHolderBelowTop = containerInViewPort.offsetTop < document.documentElement.scrollTop;
  var isPlaceHolderBelowBottom = containerInViewPort.offsetTop + containerInViewPort.offsetHeight > document.documentElement.scrollTop;
  let g_canScrollHorizontally = isPlaceHolderBelowTop && isPlaceHolderBelowBottom;


  if (g_canScrollHorizontally) {

    containerInViewPort.querySelector('main').scrollLeft += deltaY;

  }
}

html,
body {
  margin: 0;
  font-family: sans-serif;
}

.vertical-section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

main {
  overflow-x: hidden;
  display: flex;
  position: sticky;
  top: 0;
}

h1 {
  margin: 0;
  padding: 0;
}

section {
  min-width: 100vw;
  /*Works perfeclty when it's 50vw*/
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4ch;
}

section:nth-child(even) {
  background-color: teal;
  color: white;
}

<div class="vertical-section">
  Content Before
</div>
<div class="sticky-container">
  <main>
    <section>
      <h1>First</h1>
    </section>
    <section>
      <h1>Second</h1>
    </section>
    <section>
      <h1>Third</h1>
    </section>
    <section>
      <h1>Fourth</h1>
    </section>
    <section>
      <h1>Fifth</h1>
    </section>
    <section>
      <h1>Last</h1>
    </section>
  </main>
</div>
<div class="vertical-section">
  Content After
</div>

You can also iterate over the sections themselves and sum up their values in a forEach loop.

let stikyContainerHeight = Number();

sec.forEach(s => stikyContainerHeight += s.getBoundingClientRect().width);

main.setAttribute('style', 'height: ' + stikyContainerHeight + 'px');

Unable to scroll horizontally beyond 200 viewport widths

Answer №1

Similar questions

Ways to eliminate spacing underneath alerts in Bootstrap 5

Leverage Node.js/Express backend objects within frontend JavaScript

What could be causing my search form to fail to perform the search initially?

Is it necessary to use a while loop instead of a for loop when iterating through and removing values from a JavaScript array?

Showing error message when utilizing the search bar and autocomplete feature (material design CSS)

Creating a simulated callback function using Jest with a promise

Jquery UI sortable can determine the vertical orientation, either moving items up or down

Having trouble grasping ES6 concepts with Reactjs?

Avoid having the image display over the text

Extract the post date/time directly from the HTML code without relying on JavaScript

Function within a while loop

CSS techniques for aligning content

Harnessing the Power of NextJS Image Component and @svgr/webpack for Seamless Integration

What is the method for assigning a value to a variable in xhr.setRequestHeader?

Which is better for React development: TypeScript, Flow, or another option?

Interacting with a button element specified with the role attribute inside a div container using Selenium

Resizing the Canvas in Three.js with GLSL

Press a button to delete an item from the array

Display only the most recent AJAX results

Implementing dynamic button functionality to toggle classes on click event