2011-11-12 53 views
18

在iOS Safari中,在用戶停止平移之前,單指平移不會生成任何事件。 onscroll事件僅在頁面停止移動和重繪時生成。創建適用於iOS Safari的「粘性」固定位置項目

我需要一種方法來檢測實時滾動。具體來說,我想製作一個粘貼菜單,也可以在iOS Safari上使用。在非移動瀏覽器上,粘性菜單可以通過在收聽onscroll事件時在元素上的「位置相對」到「位置固定」之間切換完成。此方法在手機瀏覽器上無效,因爲onscroll事件不會持續觸發。我能做什麼?

+0

實現它的一種方法可能是讓您自己的垂直平移手勢識別並將其添加到Web視圖中。這樣你可以使用-state屬性來接收事件。 – CodaFi

+2

綁定觸摸移動並監視頁面的y – sciritai

回答

0

如果你想要的只是一個粘性菜單,你可以使用現有的庫來節省一些頭痛的問題。我已經成功與iScroll:

http://cubiq.org/iscroll

最起碼,你可以看看它是如何工作以及基地周圍,你的解決方案。

快樂黑客!

-3

老話題肯定,但我可以在這裏看到很多訪問。如果你想要的只是一個粘性菜單,你可以使用固定的定位。不需要iScroll那裏。

+0

應該指出的是,固定定位在很多移動瀏覽器中都不被支持。更多在這裏:http://bradfrostweb.com/blog/mobile/fixed-position/ –

+1

應該指出,問這個問題的人,剛剛找到一個解決方案,比我的解決方案支持少得多......我不同意你的聲明支持位置:fixed:http://caniuse.com/css-fixed –

+1

有什麼不同意? 「iOS Safari中的部分支持是指錯誤行爲。」大約50%的移動瀏覽器可以接受你的行爲不便嗎? –

3

我最近花了好幾個小時試圖爲相同的問題提出一個實用的解決方案。沒有正確的方法來做到這一點,雖然有幾個像樣的黑客(其中大部分已經提到)。問題是JavaScript在用戶滾動時暫停。當你考慮這些影響時,它是有意義的,但是它使得很難實現固定的定位元素。

我一直能找到的最好的東西就是谷歌人的這篇精彩的文章。您可以在移動Safari瀏覽器中查看​​以查看它的行動。

https://developers.google.com/mobile/articles/webapp_fixed_ui

希望這有助於。

+1

該鏈接重定向到開發者主頁。我能找到的最好的方法是通過archive.org:https://web.archive.org/web/20141001100814/https://developers.google.com/mobile/articles/webapp_fixed_ui – duncan

2

我有一個類似的問題,綁定處理程序touchstart/touchmove/touchend使用jquery檢測單指滾動,它的工作完美。在我的情況下,我需要移動另一個元素的數量與嘗試移動另一個元素的數量相同,並且在滾動嘗試時更新得很好,所以它應該適合您的需求。

相關問題