ios iOS Safari弹性滚动

问题描述 投票:0回答:4

没有jQuery实现这一目标的方法:

document.body.addEventListener('touchmove', function(event) { event.preventDefault(); });
javascript ios7 mobile-safari
4个回答
22
投票
但这不是一个适当的解决方案。最好将您的内容包裹在某个Div中,然后在其中使用CSS属性:

-webkit-overflow-scrolling: touch;

here

是例子

Edit:

这种只能防止WebView中的超频,而不是在应用程序中。因此,您需要在应用程序配置中禁用此功能。 如果使用

phonegap

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

更多描述here

如果您不使用

Phonegap,则可以使用this

因此,当您的身体中滚动内容并希望禁用弹性滚动 使用: let scrollToTop = $(window).scrollTop(); if (scrollToTop < 0) { // do something here }


1
投票

在我的情况下,这里的其他解决方案之一不足。它禁止所有滚动。可以在这里构建一个解决方案,以防止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;

1
投票

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

除了我共享的第一个代码块外,还应该在iOS滚动的文档滚动时确实将斧头放在iOS中。
    

基于@umidbek的答案,这就是它对我有用的方式

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

现在实际上有一种现代CSS来处理此问题,这在所有现代浏览器上都得到了支持,包括iOS上的Safari。

0
投票

caniuse.com说这是自2022年以来的基准。


最新问题
© www.soinside.com 2019 - 2024. All rights reserved.