Edit Question - KnowledgeHub

Title Body

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.

Tags (comma-separated) Cancel