Javascript 禁用IOS Safari弹性滚动

Javascript 禁用IOS Safari弹性滚动,javascript,ios7,mobile-safari,Javascript,Ios7,Mobile Safari,我正在用HTML和JavaScript编写一个用于iPhone的web应用程序。我想要实现的是防止应用程序弹性滚动(滚动页面范围并反弹)。但是,我需要我的应用程序的一些较长的元素才能滚动(应用程序有一个较长的画布) 我在互联网上找到了很多答案,但是,所有这些解决方案要么使用JQuery,要么完全禁用滚动,要么使用Phonegap,要么干脆在IOS 7上不起作用。我如何做到这一点?没有jQuery,有一种方法可以实现这一点: document.body.addEventListener('touc

我正在用HTML和JavaScript编写一个用于iPhone的web应用程序。我想要实现的是防止应用程序弹性滚动(滚动页面范围并反弹)。但是,我需要我的应用程序的一些较长的元素才能滚动(应用程序有一个较长的画布)


我在互联网上找到了很多答案,但是,所有这些解决方案要么使用JQuery,要么完全禁用滚动,要么使用Phonegap,要么干脆在IOS 7上不起作用。我如何做到这一点?

没有jQuery,有一种方法可以实现这一点:

document.body.addEventListener('touchmove', function(event) {
    event.preventDefault();
});
但这不是一个恰当的解决方案。最好将内容包装在某个div中,并在其上使用css属性:

 -webkit-overflow-scrolling: touch;
这就是例子

编辑:

这只会防止在webview中过度浏览,而不会在应用程序中过度浏览。因此,您需要在应用程序配置中禁用此功能。 如果您使用电话间隔:

<preference name="DisallowOverscroll" value="true" />

更多描述


如果您不使用phonegap,您可以使用。

在我的情况下,上述解决方案是不够的。它禁止所有滚动。在这里可以构建一个解决方案,防止iOS中的弹性滚动,但仍然允许在子系统上滚动。我采用了上面的解决方案,并添加了一个检查,该检查会使DOM冒泡,以确定哪个可滚动元素“拥有”滚动事件,如果它是页面的根元素,我会删除它:

function overflowIsHidden(node) {
  var style = getComputedStyle(node);
  return style.overflow === 'hidden' || style.overflowX === 'hidden' || style.overflowY === 'hidden';
}

function findNearestScrollableParent(firstNode) {
  var node = firstNode;
  var scrollable = null;
  while(!scrollable && node) {
    if (node.scrollWidth > node.clientWidth || node.scrollHeight > node.clientHeight) {
      if (!overflowIsHidden(node)) {
        scrollable = node;
      }
    }
    node = node.parentNode;
  }
  return scrollable;
}

document.addEventListener('DOMContentLoaded', function() {

    document.body.addEventListener('touchmove', function(event) {
      var owner = findNearestScrollableParent(event.target);
      if (!owner || owner === document.documentElement || owner === document.body) {
        event.preventDefault();
      }
    });

}, false);
此时,在iOS中,主体不再是可滚动或弹性滚动的,而是子元素。然后可以添加
-webkit溢出滚动:触摸给那些孩子,使他们有弹性,但文件不会。这实际上将捕获所有滚动事件,即使您滚动到子窗口的底部,因此窗口的滚动位置永远不会错误更改。或者,您也可以考虑:

['resize', 'orientationchange', 'scroll'].forEach(function(event) {
  window.addEventListener(event, function() {
    window.scrollTo(0, 0);
  });
});

除了我共享的第一个代码块之外,它还真的会对ios中的文档滚动起到很大的作用。

根据@umidbek的回答,这就是它对我的作用

     document.getElementById('content-sections').
         addEventListener('touchmove', function (event) {
               event.preventDefault();
               return false;
         });

所以,当你们在正文中有滚动内容时&你们想禁用弹性滚动吗 使用:

让scrollToTop=$(窗口).scrollTop();
如果(滚动顶部<0){
//在这里做点什么
}

因为弹性卷轴总是有负值

请参见此答案,该问题上给出的解决方案的可能副本不再有效。你会在上限和下限处感到不安。这会阻止你滚动。我希望能够滚动,但我不希望页面超出其极限。因此,允许滚动,但不这样做可能会有帮助,这仅适用于那些使用PhoneGap@user2376055如果不使用phonegap,可以使用
let scrollToTop = $(window).scrollTop();
if (scrollToTop < 0) {
   // do something here
}