close

開發網站時,在IOS上的瀏覽器若是以電腦版模式預覽時

會發現滾動到底部的時候會整個頁面都會跟著滾動

這種情況常發生在於使用iframe或是高度固定時

解決方式是透過 -webkit-overflow-scrolling 屬性控制元素在移動設備上是否使用滾動回彈效果.

-webkit-overflow-scrolling:touch;

overflow-y:scorll;

在找尋解決方式過程中發現StackoverFlow上有人提到上述方法有可能一樣not working,這時候只要在後面加上 !important 即可

 

MDN上的定義

-webkit-overflow-scrolling 二個屬素值:

auto: 使用普通滾動, 當手指從觸摸屏上移開,滾動會立即停止。

touch: 使用具有回彈效果的滾動, 當手指從觸摸屏上移開,內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。

 

關於可能產生的Bug部分,可參閱對岸相關討論文章

 

其它參考資料:深入研究-webkit-overflow-scrolling:touch

arrow
arrow
    文章標籤
    #CSS -webkit-
    全站熱搜

    Apries 發表在 痞客邦 留言(0) 人氣()