Question 244247 in CSS Question posted in
Some basic documentation can be found here.

Css – Mouse wheel scroll transition not working from overflow to page scroll

The website does have a fixed element with overflow:auto. When a user positions the mouse over this element and scrolls, the element scrolls just fine. However, when the element is scrolled to the end, the page does not automatically take over the scroll. Instead, the user has to wait for about 1 second and then scroll again until the scrolling from the document takes over.

How can I make this transition smooth without the need of a scroll pause?

PS: An example of this is also the "Similar questions" box on stackoverflow.

Tags:

2

Answers


  1. 0

    When a container with overflow set to auto or scroll, only when the content within that container has reached its end will the scroll propagate to the parent or the main document. use javascript to detect the end of the content by adding an event_listener as:

    const container = document.getElementById('container');

container.addEventListener('wheel', (event) => {
    if (container.scrollHeight - container.scrollTop === 
      container.clientHeight) {
        // Container has reached its scroll limit, propagate the scroll to the page
        event.preventDefault(); // Prevent container from scrolling
        window.scrollBy(0, event.deltaY); // Scroll the page
    }
});
    Login or Signup to reply.
  2. 0

    capture the scroll event on the fixed element and pass it to the main document seamlessly like:

    const container = document.getElementById('container');
let scrolling = false;

container.addEventListener('mouseenter', () => {
  scrolling = true;
});

container.addEventListener('mouseleave', () => {
  scrolling = false;
});

container.addEventListener('wheel', (event) => {
  if (scrolling) {
    if (container.scrollHeight - container.scrollTop === container.clientHeight) {
      // Container has reached its scroll limit, propagate the scroll to the page
      event.preventDefault(); // Prevent container from scrolling
      window.scrollBy(0, event.deltaY); // Scroll the page
    }
  }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search