Question

我只想在Safari（OSX Lion）中调整弹性滚动/反弹效果。

我找到了在css中为body设置overflow: hidden的解决方案，但正如预期的那样只有禁用滚动条，所以如果网站比屏幕“更长”，则将无法滚动！

欢迎任何解决方案或提示！谢谢！

Answer 1

通过应用以下CSS，您可以更普遍地实现这一目标：

html,
body {
  height: 100%;
  width: 100%;
  overflow: auto;
}

这允许您的内容，无论它是什么，都可以在body内滚动，但请注意，scroll事件被触发的滚动上下文现在是document.body，而不是{{1 }}

Answer 2

如果在overflow:hidden元素上使用<body> hack，为了恢复正常的滚动行为，您可以将<div>绝对放置在元素内部，以便{{{}向后滚动1}}。我认为这是最好的选择，只使用css很容易实现！

或者，您可以尝试使用jQuery：

overflow:auto

javasrcipt中相同：

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

最后一个选项，请检查ipad safari: disable scrolling, and bounce effect?

Answer 3

overflow:hidden;-webkit-overflow-scrolling:touch在iOS safari 8.1上运行良好，因为固定标题将超出可见区域。

gif

正如@Yisela所说，css应放在.container（<div>下<body>）。这似乎没问题（在iOS 8.1的safari上）。

gif

我已将演示放在我的博客上： http://tech.colla.me/en/show/disable_elastic_scroll_on_iOS_safari

Answer 4

我在iPad上解决了它。如果它也适用于OSX，请尝试。

<md-content>

仅当您的内容小于屏幕或使用某些布局框架（在我的情况下为Angular Material）时才有效。

在Angular Material中，您可以禁用整页的过度滚动效果，但内部typedef struct TimeSlot { uint32_t val; } TimeSlot; int TimeSlotMinutes(TimeSlot val); TimeSlot TimeSlotSetMinutes(TimeSlot val, int v);仍然可以滚动。

Answer 5

我做了一个扩展，在所有网站上禁用它。在这样做时，我使用了三种技术：纯CSS，纯JS和混合。

CSS版本与上述解决方案类似。 JS有点像这样：

var scroll = function(e) {
    // compute state
    if (stopScrollX || stopScrollY) {
        e.preventDefault();              // this one is the key
        e.stopPropagation();
        window.scroll(scrollToX, scrollToY);
    }
}

document.addEventListener('mousewheel', scroll, false);

当一个人使用position：fixed元素并让浏览器进行滚动时，CSS就会起作用。当一些其他JS依赖于窗口（例如事件）时，需要JS一个，这将被前一个CSS阻止（因为它使得主体滚动而不是窗口），并且通过停止边缘处的事件传播来工作，但需要合成非边缘分量的滚动;缺点是它阻止了某些类型的滚动（那些与CSS一起工作）。当滚动到达边缘（JS）时，混合方法尝试通过选择性地禁用方向性溢出（CSS）来采取混合方法，并且理论上可以在两种情况下都起作用，但是当前并不是因为它在极限处有一些余地。

因此，根据某个网站的实施情况，需要采用一种方法或另一种方法。

如果需要更多详细信息，请参阅此处：https://github.com/lloeki/unelastic

Answer 6

没有'溢出'解决方案对我有用。我正在用JavaScript使用JavaScript编写视差效果。在OSX上的Chrome和Safari中，弹性/橡皮筋效果会使我的滚动数字变得混乱，因为它实际滚动超过文档的高度并使用超出边界的数字更新窗口变量。我必须做的是检查滚动量是否大于实际文档的高度，如下所示：

$(window).scroll(
    function() {
        if ($(window).scrollTop() + $(window).height() > $(document).height()) return;
        updateScroll(); // my own function to do my parallaxing stuff
    }
);

Answer 7

您可以检查滚动偏移是否在边界内。如果它们超出范围，请将它们放回去。

var scrollX = 0;
var scrollY = 0;
var scrollMinX = 0;
var scrollMinY = 0;
var scrollMaxX = document.body.scrollWidth - window.innerWidth;
var scrollMaxY = document.body.scrollHeight - window.innerHeight;

// make sure that we work with the correct dimensions
window.addEventListener('resize', function () {
  scrollMaxX = document.body.scrollWidth - window.innerWidth;
  scrollMaxY = document.body.scrollHeight - window.innerHeight;
}, false);

// where the magic happens
window.addEventListener('scroll', function () {
  scrollX = window.scrollX;
  scrollY = window.scrollY;

  if (scrollX <= scrollMinX) scrollTo(scrollMinX, window.scrollY);
  if (scrollX >= scrollMaxX) scrollTo(scrollMaxX, window.scrollY);

  if (scrollY <= scrollMinY) scrollTo(window.scrollX, scrollMinY);
  if (scrollY >= scrollMaxY) scrollTo(window.scrollX, scrollMaxY);
}, false);

http://jsfiddle.net/yckart/3YnUM/

Answer 8

上述解决方案都不适用于我，但是我将内容包装在div（＃outer-wrap）中，然后使用以下CSS：

body {
   overflow: hidden;
}
#outer-wrap {
    -webkit-overflow-scrolling: touch;
     height: 100vh;
     overflow: auto;
}

显然只适用于支持视口宽度/高度的浏览器。

Answer 9

有上述CSS解决方案不起作用的情况。例如，同一页面上的透明固定标题和粘性页脚。为了防止Safari中的顶部反弹并使全屏滑块闪烁，可以使用它。

    if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {

        $window.bind('mousewheel', function(e) {

            if (e.originalEvent.wheelDelta / 120 > 0) {

                if ($window.scrollTop() < 2) return false;
            } 
        });

    }

在Safari中禁用弹性滚动

9 个答案: