I don't want the content of my site sloshing around when the user hits the edge of a page. I just want it to stop.
The omni-present javascript solution I see everywhere is this:
$(document).bind(
'touchmove',
function(e) {
e.preventDefault();
}
);
But this prevents scrolling entirely. Is there way to just remove the bounce. Preferably with CSS or a meta tag as opposed JS, but anything that works will do.
I have to add another answer. My first approach should work, but, there is an iOS bug, which still bumbs the whole page, even if e.stopPropagation.
mikeyUX find a workaround for this: https://stackoverflow.com/a/16898264/2978727 I wonder why he just get a few clicks for this great idea...
This is how I used his approach in my case:
var content = document.getElementById('scrollDiv');
content.addEventListener('touchstart', function(event) {
this.allowUp = (this.scrollTop > 0);
this.allowDown = (this.scrollTop < this.scrollHeight - this.clientHeight);
this.slideBeginY = event.pageY;
});
content.addEventListener('touchmove', function(event) {
var up = (event.pageY > this.slideBeginY);
var down = (event.pageY < this.slideBeginY);
this.slideBeginY = event.pageY;
if ((up && this.allowUp) || (down && this.allowDown)) {
event.stopPropagation();
}
else {
event.preventDefault();
}
});
Disable bouncing by prevent the default behaviour of the document:
document.addEventListener("touchmove", function(event){
event.preventDefault();
});
Allow scrolling by prevent that the touch reaches the document level (where you would prevent the scrolling):
var scrollingDiv = document.getElementById('scrollDiv');
scrollingDiv.addEventListener('touchmove', function(event){
event.stopPropagation();
});
Mind the difference between these two:
event.stopPropagation()
event.preventDefault()
StopPropagation should be your choice here ! Here is a very good explanation: http://davidwalsh.name/javascript-events
Edit: Same problem, same solution: document.ontouchmove and scrolling on iOS 5
Edit2: fixed typo in variable names added brackets after methods
If apply to Desktop Browser, don't need any JavaScript codes, just few lines of CSS codes:
html {
height : 100%;
overflow: hidden;
}
body {
height : 100%;
overflow: auto;
}
I tried lots of different approaches I found here on stackoverflow, but iNoBounce was the thing that really worked for me: https://github.com/lazd/iNoBounce
I just included it in my index.html:
<script src="inobounce.js"></script>
This library is solution for my scenarios. Easy way to use just include library and initialize where you want like these;
noBounce.init({
animate: true
});
If you want to prevent bouncing only on one element and not on the whole page you can do it like:
noBounce.init({
animate: true,
element: document.getElementById("content")
});
Found a code that worked to me, I believe it will work to you.
The solution is written here: http://apdevblog.com/optimizing-webkit-overflow-scrolling/
Basically, you need to have this js code:
document.addEventListener("DOMContentLoaded", ready, false);
document.addEventListener("touchmove", function (evt)
{
evt.preventDefault();
}, false);
function ready()
{
var container = document.getElementsByClassName("scrollable")[0];
var subcontainer = container.children[0];
var subsubcontainer = container.children[0].children[0];
container.addEventListener("touchmove", function (evt)
{
if (subsubcontainer.getBoundingClientRect().height > subcontainer.getBoundingClientRect().height)
{
evt.stopPropagation();
}
}, false);
}
And then, have your scrollable divs with the class="scrollable".
After trying these suggestions and reading several articles, the fix for me was to use the CSS property < overflow-x: hidden; > on the problematic element/container.
