-webkit-overflow-scrolling：touch和'點擊狀態欄滾動到頂部'

Navigate to this fiddle在iPhone上，並注意到即使有-webkit-overflow-scrolling:touch聲明，「點按頂部」功能仍然有效。這在運行iOS 6.1的iPhone 4和運行iOS 5.0.1的iPhone 4S上進行了測試。-webkit-overflow-scrolling：touch和'點擊狀態欄滾動到頂部'

這個測試提出了一個問題：並宣佈-webkit-overflow-scrolling:touch影響「水龍頭狀態欄滾動到頂部」在iOS中的行爲嗎？

來源

2013-02-14 Bryce

如果你把-webkit-overflow-scrolling:touch比document.body其他任何元素，它將打破默認水龍頭狀態欄滾動到頂部行爲。

GitHub上有一個小腳本，它的作用是replacement for the missing scroll to top of iOS overflow scrolling。您可以將它放在您的應用程序標題上，以獲得幾乎相同的結果。

來源

2013-09-08 17:12:44

從我的經驗來看，它的確影響到它。我不知道有兩種功能同時工作的方式，至少從iOS 6.1開始。

我也有從jQuery Mobile docs報價實現此起來：

的-webkit-溢出滾動：觸摸屬性似乎禁用事件到時您滾動到頁面頂部在狀態欄中點擊。我們希望Apple修復這個問題是因爲它是一個非常有用的功能。

真的很不幸，蘋果已經這樣設置了，因爲我也喜歡使用這個功能，但是滾動到頂部的功能對我來說更重要。

來源

2013-02-14 17:21:19

由於您已將-webkit-overflow-scrolling: touch;應用於body元素，因此您的小提琴不會打破「點按狀態欄滾動到頂部」行爲。如果將其應用於body中的任何元素，則行爲會中斷。

來源

2013-02-23 00:09:05 Max

有解決的辦法 - http://www.artspot.eu/blog/2010/12/29/extending-iscroll-scroll-to-the-top-by-tapping-the-status-bar/

利瑪竇斯皮內利，iScroll的創造者，在tweet它的其實根本不難實現這一揭示。當你點擊狀態欄窗口對象上的滾動事件被觸發。使用事件監聽器，您可以輕鬆地調用scrollTo函數滾動到列表頂部的。
window.addEventListener('scroll', function(){ 
    yourscrollobject.scrollTo(0,0,duration); 
}, false); 

來源

2013-08-15 21:25:40

這似乎並沒有真正起火。你可否確認？ – 2016-10-30 14:27:03

IIRC你應該使window.innerHeight + 1這個窗口的高度有'scroll'觸發器。 – 2016-10-30 15:17:54

由於這裏的大多數答案都已經注意到，所以在document.body之外的任何元素上都會加上-webkit-overflow-scrolling: touch會導致問題。如果您使用的是固定的標題和不希望添加任何相關性，這應該使用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。希望這可以幫助人們走出困境。如果你願意放手，@patrick鏈接的github項目看起來是另一個很好的解決方案。

來源

2015-04-28 16:19:59 Alex

-webkit-overflow-scrolling：touch和'點擊狀態欄滾動到頂部'

回答

相關問題