Disable elastic scrolling in Safari

javascript jquery css safari osx-lion
Fabian Leutgeb picture Fabian Leutgeb · Nov 16, 2011 · Viewed 151k times · Source

I just wanted to diable the elastic scrolling/bounce effect in Safari (OSX Lion).

I found the solution to set overflow: hidden for body in css, but as expected it only disables the scrollbar, so if the website is "longer" than the screen you won't be able to scroll!

Any solutions or hints are welcome! Thanks!

Answer

Aintaer picture Aintaer · May 2, 2013

You can achieve this more universally by applying the following CSS:

html,
body {
  height: 100%;
  width: 100%;
  overflow: auto;
}

This allows your content, whatever it is, to become scrollable within body, but be aware that the scrolling context where scroll event is fired is now document.body, not window.

Related questions

How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More
How can I remove a style added with .css() function?

I'm changing CSS with jQuery and I wish to remove the styling I'm adding based on the input value: if(color != '000000') $("body").css("background-color", color); else // remove style ? How can I do this? Note that the line above …

Read More
Refresh/reload the content in Div using jquery/ajax

I want to reload a div on click of a button. I do not want to reload the full page. Here is my code: HTML: <div role="button" class="marginTop50 marginBottom"> <input type="button" id="getCameraSerialNumbers" value="…

Read More