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

【问题标题】：-webkit-overflow-scrolling:touch and 'Tap status bar to scroll to top'-webkit-overflow-scrolling:touch 和“点击状态栏滚动到顶部”
【发布时间】：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 中的“点击状态栏滚动到顶部”行为吗？

【问题讨论】：

标签： scroll mobile-safari vertical-scrolling mobile-webkit

【解决方案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 看起来像是另一个很棒的解决方案。

【讨论】：