Question

我正在编写一个HTML和JavaScript的网络应用程序，以便在iPhone上使用。我想要实现的是阻止应用程序进行弹性滚动（滚动浏览页面范围并弹回）。但是，我需要我的应用程序的一些较长元素才能滚动（应用程序有一个长画布）。

我已尝试过在互联网上其他地方找到的许多答案，但是，所有这些解决方案要么使用JQuery，要么完全禁用滚动，使用Phonegap或只是简单地在IOS 7上无效。我该怎么办？< / p>

Answer 1

有一种方法可以在没有jQuery的情况下实现这一目标：

document.body.addEventListener('touchmove', function(event) {
    event.preventDefault();
});

但这不是一个合适的解决方案。最好将内容包装在某个div中，并在其上使用css属性：

 -webkit-overflow-scrolling: touch;

Here就是示例

修改

这只会阻止在webview中过度滚动，而不是在app中。因此，您需要在app config中禁用此功能。如果您使用 phonegap ：

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

更多说明here

如果您不使用 phonegap ，则可以使用this。

Answer 2

上述解决方案在我的情况下是不够的。它禁止所有滚动。可以在此处构建一个防止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-overflow-scrolling: touch;添加到这些孩子，这样他们就有弹性，但文档不会。即使滚动到子项的底部，这实际上也会捕获所有滚动事件，因此窗口的滚动位置不会错误地更改。或者您也可以考虑：

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

除了我分享的第一个代码块之外，应该在ios中完全抛出文档滚动。

Answer 3

根据@umidbek的回答，这就是我的工作方式

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

Answer 4

因此，当您体内具有滚动内容并且想要禁用弹性滚动时使用：

let scrollToTop = $(window).scrollTop();
if (scrollToTop < 0) {
   // do something here
}

因为弹性滚动将始终具有负值

禁用IOS Safari Elastic Scrolling

4 个答案:

禁用IOS Safari Elastic Sc​​rolling

4 个答案:

禁用IOS Safari Elastic Scrolling