I'm looking for a way to prevent the elastic scrolling that occurs on OS X in both Chrome and Safari.

If you don't understand what I mean, it's when you scroll up while the page is at the top, or down when the page is at the bottom, and it shows a gray background behind the page.

There is a css solution for single page apps where you just add overflow:hidden to the html or body

However, I need to be able to scroll.

I've come up with a solution using Javascript (JQuery), but it's only for scrolling passed the top, and only works for chrome. Also, it's a bit buggy in Safari.

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

So that's just checking of the user scrolls below 1 meaning they try to scroll up passed where the page ends. I tried 0 but that didn't work. I haven't been able to find a way to check if the user scrolls passed 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've added a check for if we scroll passed the bottom of the page. This method is not working though, it's bouncing around very ungracefully.

I'm looking for a way to prevent the elastic scrolling that occurs on OS X in both Chrome and Safari.

If you don't understand what I mean, it's when you scroll up while the page is at the top, or down when the page is at the bottom, and it shows a gray background behind the page.

There is a css solution for single page apps where you just add overflow:hidden to the html or body

However, I need to be able to scroll.

I've come up with a solution using Javascript (JQuery), but it's only for scrolling passed the top, and only works for chrome. Also, it's a bit buggy in Safari.

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

So that's just checking of the user scrolls below 1 meaning they try to scroll up passed where the page ends. I tried 0 but that didn't work. I haven't been able to find a way to check if the user scrolls passed 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've added a check for if we scroll passed the bottom of the page. This method is not working though, it's bouncing around very ungracefully.

• javascript
• jquery
• css

• 1 Is there a reason why you want to do this? I find that that little bit of UI is a clear indicator that I have no more to scroll but also that it's still working (i.e. not frozen). People aren't paid lots of money to think about these things for no reason. – Popnoodles Commented Feb 21, 2013 at 2:57
• I'd also question why you want to do this. If users don't want this behavior, it is possible to disable it (unfortunately, not via UI). If you do force this, test for the case where people have turned it off! – Cymen Commented Feb 21, 2013 at 2:59
• I'm making a site where things happen depending on the scroll amount. When the user scrolls passed the end of the page it causes things to look a little choppy. Not a huge bug, but I'm trying to make things look really solid. – Kolby Commented Feb 21, 2013 at 3:06

4 Answers 4

You can now use overscroll-behavior:

html, body {
  overscroll-behavior: none;
}

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

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

As @Yoann commented, the overscroll-behavior css property does the trick.

However, if you include his solution as is

html, body {
  overscroll-behavior: none;
}

you are disabling trackpad gestures navigation, which in my case were important.

You can disable elastic scrolling only on the y-axis, allowing users to navigate with their trackpad by doing:

html, body {
  overscroll-behavior: auto none;
}

While I dislike the methodology, you can use jQuery to get the document height (and thus the bottom of the page for the scroll distance using $(document).height();)

Another method would be to wrap the entire page with a <div id="preventScroll"></div> wrapper, with the property overflow: scroll; height: 100%; width: 100%;

That would be a separate scrolling device and prevent your whole issue.