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

Include a <div> element to display the date in an HTML format, ensuring that the days and months

I'm looking for assistance on how to execute a render right after making a put or delete request

"Encountering an issue when linking the file with phpMyAdmin

WordPress AJAX code encountered a http400 Bad Request

Launch a new email window in Outlook from a server using C#

Implementing a toggle function in Vue.js to add or remove a class from the body element when a

The Distinction Between "Q" and "q" in AngularJS and RequireJS

Is it necessary to reset (local storage, session storage) once the countdown timer reaches zero?

Utilizing a V-for/V-if loop to iterate through a multi-dimensional array and filter data based on date

Dropdown box not displaying any choices

What is causing the backslash character to be removed from my ajax request?

The hover effect on MUI TableRows is being overshadowed by the background color of the TableCell

"Unraveling the depths of a multidimensional array in JavaScript: a comprehensive guide

Most effective strategy for optimizing web font loading considering caching and load speeds

Verify the presence of a JSON object within the session storage using JavaScript

The React MUI Tab component triggers a re-render and clears the states of its child components

Reverting back to the specified CSS style

The BorderWidth property is set to 2px, however, it is not visible on the

Tips on utilizing a single modal to showcase various images

Attempting to construct an 'or' query that relies on the combination of two distinct joined tables