Question

iPhone上的

Navigate to this fiddle并注意到即使有-webkit-overflow-scrolling:touch声明，也可以点按“最新”字样。功能仍然有效。这是在运行iOS 6.1的iPhone 4和运行iOS 5.0.1的iPhone 4S上测试的。

此测试提出了一个问题：声明-webkit-overflow-scrolling:touch会影响＆＃39; 点击状态栏以滚动到顶部＆＃39; iOS中的行为？

Answer 1

根据我的经验，它确实会影响它。我不知道两种功能同时工作的方法，至少从iOS 6.1开始。

我也有jQuery Mobile docs引用它的引用：

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

Apple真的很不幸，因为我也喜欢使用这个功能，但滚动到顶部的能力对我来说更重要。

Answer 2

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

GitHub上有一个小脚本，可以作为replacement for the missing scroll to top of iOS overflow scrolling使用。您可以将其放在应用标题上，以获得几乎相同的结果。

Answer 3

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

Answer 4

有一种解决方法 - 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);

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

-webkit-overflow-scrolling：触摸和“点按状态栏以滚动到顶部”

5 个答案: