-webkit-overflow-scrolling:touch 和“点击状态栏滚动到顶部”

Posted 2023-02-23

【中文标题】-webkit-overflow-scrolling:touch 和“点击状态栏滚动到顶部”

【英文标题】：-webkit-overflow-scrolling:touch and 'Tap status bar to scroll to top'

【发布时间】：2013-01-29 20:31:18

【问题描述】：

Navigate to this fiddle 在 iPhone 上并注意即使有 -webkit-overflow-scrolling:touch 声明，“点击顶部”功能仍然有效。这是在运行 ios 6.1 的 iPhone 4 和运行 iOS 5.0.1 的 iPhone 4S 上测试的。

这个测试提出了一个问题：声明 -webkit-overflow-scrolling:touch 会影响 iOS 中的“点击状态栏滚动到顶部”行为吗？

【参考方案1】：

根据我的经验，它确实会影响它。我不知道有什么方法可以让这两个功能同时工作，至少在 iOS 6.1 中是这样。

我也有来自jQuery Mobile docs 的引用来支持这一点：

-webkit-overflow-scrolling:touch 属性似乎禁用了在状态栏中点击时间时将您滚动到页面顶部的事件。我们希望 Apple 修复此问题，因为这是一个非常有用的功能。

很遗憾 Apple 将其设置为这样，因为我也很想使用此功能，但滚动到顶部功能对我来说更重要。

【参考方案2】：

您的小提琴不会破坏“点击状态栏以滚动到顶部”的行为，因为您已将 -webkit-overflow-scrolling: touch; 应用于 body 元素。如果将其应用于 body 内的任何元素，则行为会中断。

【参考方案3】：

有办法解决这个问题 – http://www.artspot.eu/blog/2010/12/29/extending-iscroll-scroll-to-the-top-by-tapping-the-status-bar/

iScroll 的创建者 Matteo Spinelli 在tweet 中透露，它是 其实实现这一点并不难。当您点击状态栏时， 窗口对象上的滚动事件被触发。使用事件 侦听器，然后您可以轻松调用 scrollTo 函数滚动到 列表的顶部。

window.addEventListener('scroll', function()
  yourscrollobject.scrollTo(0,0,duration);
, false);

【讨论】：

这似乎并没有真正触发。你能确认一下吗？

IIRC 你应该让窗口的高度像 window.innerHeight + 1 来触发scroll。

【参考方案4】：

如果您将-webkit-overflow-scrolling:touch 放在document.body 以外的任何元素上，它将破坏默认的点击状态栏以滚动到顶部 行为。

在 GitHub 上有一个小脚本，用作 replacement for the missing scroll to top of iOS overflow scrolling。您可以将它放在您的应用程序标题中以实现几乎相同的结果。

【参考方案5】：

正如这里的大多数答案所指出的，将-webkit-overflow-scrolling: touch 放在 document.body 以外的任何元素上都会导致问题。如果您使用的是固定标头并且不想添加任何依赖项，那么这对使用 JQuery 的任何人都应该有用：

$('.fixed-header').on('click',function(e)
    var $scrollingElement = $('.scrolling-element');

    $scrollingElement.css('overflow','hidden');
    $scrollingElement.animate( scrollTop: 0 , "fast", function() 
        $scrollingElement.css('overflow','auto');
    );
);

切换overflow 属性的目的是用于使用动量滚动的设备。这会立即停止任何动量并执行滚动动画。我将滚动元素设置为变量，这样我们就不会不必要地多次查询 DOM。希望这可以帮助别人。如果您宁愿放手一搏，链接到的 github 项目 @patrick 看起来像是另一个很棒的解决方案。