Transition from mouse wheel scroll to page scroll not functioning properly when overflow is enabled

Question

Transition from mouse wheel scroll to page scroll not functioning properly when overflow is enabled

The website has a fixed element that uses overflow:auto. Users can scroll this element by positioning the mouse over it. However, once the element reaches the end of its scroll, the page does not seamlessly take over the scrolling. Instead, there is about a 1-second delay before the document scrolling resumes.

Is there a way to make this transition between element and document scrolling smoother without any pause?

PS: A similar issue can be observed in the "Similar questions" box on stackoverflow.

javascript html css

Answer 1

Answer №1

When the overflow property of a container is set to auto or scroll, the scrolling action will only occur when the content within that container has reached its end. To detect when the content has reached its limit in JavaScript, you can add an event listener like this:

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
    }
});

Answer 2

When the overflow property of a container is set to auto or scroll, the scrolling action will only occur when the content within that container has reached its end. To detect when the content has reached its limit in JavaScript, you can add an event listener like this:

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
    }
});

Answer 3

Answer №2

implementing a seamless scroll event passing from a fixed element to the main document can be done as shown below:

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
    }
  }
});

Answer 4

implementing a seamless scroll event passing from a fixed element to the main document can be done as shown below:

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
    }
  }
});

Transition from mouse wheel scroll to page scroll not functioning properly when overflow is enabled

Answer №1

Answer №2

Similar questions

Issue with NodeJS: The HTTP GET request is returning the code instead of the expected JSON object

Encountering an issue while trying to verify user registration in MySQL using Node.js Express. During the user registration process, an error arises indicating that 'res' is not defined

The div height set to 100% and using display:flex is experiencing issues in Chrome

Executing a function with a click, then undoing it with a second click

Animate.css does not function properly when loaded locally

Using jQuery to retrieve values from clicked buttons

Exploring the Functionality of Cookies in Nuxt 3 API Endpoints and Middlewares

Utilizing border-radius specifically on the ul element to apply rounded corners to only the outer li items

Using JavaScript to auto-scroll a textarea to a certain position

Is there a way to store JSON data in a constant variable using Node Fetch without encountering the error TypeError [ERR_INVALID_URL]: Invalid URL?

JavaScript code can be used to access data from a JSON file and present the flower and color information in separate unordered lists

How can I apply a jquery method to a variable when JavaScript already has a method with the same name?

Is it possible to utilize WebRTC (simple-peer) with STUN without the need for additional signaling?

The parent DIV has a height of 0px, yet the child element is still visible

What is the best way to dynamically implement text ellipsis using CSS in conjunction with Angular 7?

What is the best way to toggle the visibility of fields on a modal in a Ruby on Rails

Issue with content not properly aligning next to the vertical navigation bar

Having difficulty retrieving the necessary information for manipulating the DOM using Express, Ajax, and Axios

Display or conceal a div element using a dropdown menu selection

KineticJs: Enhancing Rotation with Multitouch Capability