15

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

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

4

5 回答 5

11

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

GitHub 上有一个小脚本，可以替代缺少的滚动到顶部的 iOS 溢出滚动。您可以将它放在您的应用程序标题中以实现几乎相同的结果。

于 2013-09-08T17:12:44.020 回答
9

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

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

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

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

于 2013-02-14T17:21:19.243 回答
2

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

于 2013-02-23T00:09:05.960 回答
0

有办法解决这个问题 - <a href="http://www.artspot.eu/blog/2010/12/29/extending-iscroll-scroll-to-the-top-by-tapping-the-status-bar /" rel="nofollow">http://www.artspot.eu/blog/2010/12/29/extending-iscroll-scroll-to-the-top-by-tapping-the-status-bar/

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

window.addEventListener('scroll', function(){
  yourscrollobject.scrollTo(0,0,duration);
}, false);
于 2013-08-15T21:25:40.090 回答
0

正如这里的大多数答案所指出的那样，放置-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 看起来是另一个很棒的解决方案。

于 2015-04-28T16:19:59.250 回答