iOS：禁用反弹滚动，但允许正常滚动 [英] iOS: disable bounce scroll but allow normal scrolling

问题描述

当用户点击页面边缘时，我不希望我的网站的内容晃动。

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.

我无处不在的全方位JavaScript解决方案是：

The omni-present javascript solution I see everywhere is this:

$(document).bind(
   'touchmove',
   function(e) {
     e.preventDefault();
   }
);

但这可以完全防止滚动。有办法只是删除反弹。最好使用CSS或元标记，而不是JS，但是任何工作都可以。

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.

推荐答案

我的第一种方法应该可以工作，但是，有一个iOS bug，即使是e.stopPropagation，仍然是整个页面。

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找到解决方法为此： http://stackoverflow.com/a/16898264/2978727
我不知道为什么他只是得到这个好主意的几次点击...

mikeyUX find a workaround for this: http://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();
    }
});

这篇关于iOS：禁用反弹滚动，但允许正常滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！