Elastic Scrolling Prevention on OS X Chrome and Safari

Question

I am looking for a way to prevent scrolling of a stretchy image that occurs on OS X in both Chrome and Safari.

If you do not understand what I mean, this is when you scroll up, while the page is up or down, when the page is below, and a gray background is displayed behind it.

There is a css solution for single page applications where you just add overflow:hidden in html or body

However, I need to scroll.

I came up with a solution using Javascript (jQuery), but it only went to the top for scrolling and works only for chrome. In addition, it is a bit buggy in Safari.

 $(window).on('scroll', function(e){ scrollAmount = $(this).scrollTop(); if(scrollAmount < 1){ $(this).scrollTop(1); } }); 

So just checking the user’s scroll below 1 means they are trying to scroll the page to the end of the page. I tried 0, but that didn't work. I could not find a way to check if the user is scrolling at the bottom of the page.

So, any thoughts?

Edit:

 $(window).on('scroll', function(e){ scrollAmount = $(this).scrollTop(); if(scrollAmount < 1){ $(this).scrollTop(1); } if(scrollAmount > $(document).height() - $(window).height()){ $(this).scrollTop($(window).height()); } }); 

Now I added a check if we scroll to the bottom of the page. This method does not work, although it bounces very ruthlessly.

Answer 1

So far I do not like this methodology. If you intend to use jQuery, you can get the height of the document (and therefore the bottom of the page to scroll with $ (document) .height ();)

Another method would be wrapping the entire page with a property overflow: scroll; height: 100%; width: 100%;

This will be a separate scrolling device and will prevent the whole problem.

Answer 2

When you quickly scroll up, the elastic browser causes the top of the scroll to become negative. Using st <= 0, make sure no action is taken.

 $(window).on('scroll',function(){ var dh = $(document).height(), wh = $(window).height(), st = $(window).scrollTop(); if (st <= 0) { $(this).scrollTop(0); } else if (st + wh >= dh) { $(this).scrollTop(dh); } });