Geek asks and answers

Capture scroll in inner div

What I'm trying to achieve is imagine that you have a tall page with several divs in it.
The highest page itself scrolls as well as the div.

I want to get to scroll the entire page when scrolling the div to the limit.
What happens now is that when you reach the end of the div, scrolling fiercely, you start scrolling the entire page. I want to prevent the whole page from scrolling, as this is for a private project, and the elements below are rarely used.

Divas are not dynamically generated, so I can hard code everything.

If possible, I would really like to avoid using jQuery, because in this case it's a bit overkill.

// edit: A small example can be found at http://gnur.nl/demo.html The
supposed behavior of this demo is that the entire page never scrolls when you scroll inside the bacon div.

+3
source share
1 answer

I am afraid that this is a lost battle, the scroll event does not look excellent:

http://www.w3.org/TR/DOM-Level-3-Events/#event-type-scroll

Or maybe with a desperate hack to scroll through the number of pixels that have been scrolled:

var lastPos = isNaN(window.pageYOffset) ? 
  document.documentElement.scrollTop :
  window.pageYOffset;

window.onscroll = function(ev){
  var diff = (isNaN(window.pageYOffset) ? 
    document.documentElement.scrollTop : 
    window.pageYOffset) - lastPos;
  window.scrollBy(0, -diff);
};

And using onmouseoverand onmouseoutover the DIV to prevent it or not.

0
source

More articles:


All Articles