Elastic scrolling is something that first reared its head with the iPhone, iPod Touch and iPad. iOS devices have this interesting and novel ability to make web pages in Safari have a feeling of elasticity to them. Generally, I find this effect appealing.
Unfortunately, for those things that might be designed more as web "apps" than as web "content" the elasticity can become frustrating and annoying.
OSX Lion introduces lots of things from the iOS world, including elastic scrolling in web pages.
Disabling the elastic effect has two separate requirements. In desktop Mac OS X Lion, to disable elastic scrolling you need to implement the following CSS rule:
body {
overflow: hidden;
}
In iOS devices, you need JavaScript instead, something like this will do the trick:
$(document).bind(
'touchmove',
function(e) {
e.preventDefault();
}
);
If you find jQuery confusing, this is the equivalent regular JavaScript:
document.addEventListener(
'touchmove',
function(e) {
e.preventDefault();
},
false
);
<body>
<div>
All content goes here.
</div>
</body>
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
}There are no comments posted at this time.
* All comments are moderated and are subject to approval.
Your comment will appear once it has been approved.
Posting multiple times will not expedite the approval process.