-webkit-overflow-scrolling:屬性

      以前在用css實現橫向滾動時,用到了-webkit-overflow-scrolling:touch實現了滾動回彈效果,今天就完全的認識下這個傢伙以及它所帶來的各類坑,並總結了一些排坑的辦法。css

     一.-webkit-overflow-scrolling是什麼東西html

         -webkit-overflow-scrolling控制元素在移動設備上面是否有滾動回彈效果,它能夠設置成auto和touchios

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

           使用touch可讓滾動條有滾動回彈效果,就像是ios原生的滾動體驗同樣瀏覽器

 

   二.解決safari瀏覽器佈局抖動的問題工具

       想實現一個佈局爲header、main、bottom的佈局,其中頭部和底部經過fixed固定,中間部分經過滾動條滑動。佈局

       若是目的是實現只要中間的內容超過屏幕高度時,中間內容會自動滾動的效果的話,main部分加上上下的padding,而後不須要本身添加任何滾動條屬性,當超出高度時,spa

  body會自動產生滾動條。這樣咱們的目的實際上是實現了的。code

     可是在safari上,當超出高度,頁面往下滑時,瀏覽器底部的工具欄會隨着頁面一塊兒晃動(向下滾動時會拉起底部工具欄),形成了很很差的體驗。因此咱們想在中間的main部分       加一個獨立的滾動條htm

     解決方案一:

           在main上使用fixed定位,加上overflow-y屬性。

 .main { position: fixed; top: 50px; bottom: 50px; overflow-y: scroll;  }

         不過不推薦這個fixed方案,由於頁面偶爾卡住不動,下面說到了這個問題。

     解決方案二:

           中間的main不設定位高度100%,再padding頭部和尾部

           其中頭部和底部的定位設爲absolute會比設爲fixed體驗更好(何況fix佈局在移動端原本就有各類各樣的問題,仍是儘可能避開:) )。

           大體代碼以下,還是 overflow-y 和-webkit-overflow-scrolling,重點在於中間部分依照文本流佈局。

          html, body { height: 100%; }

          .main { padding: 50px 0; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; }

    三.探究-webkit-overflow-scrolling:touch 偶爾卡住或不能滑動的bug

最多見的例子就是,

  • 在safari上,使用了-webkit-overflow-scrolling:touch以後,頁面偶爾會卡住不動。
  • 在safari上,點擊其餘區域,再在滾動區域滑動,滾動條沒法滾動的bug。
  • 經過動態添加內容撐開容器,結果根本不能滑動的bug。

      相應的解決辦法有,本身對應本身問題,找解決辦法:

     3.1保證使用該屬性的元素上沒有設置定位

          若是出現偶爾卡住不動的狀況,那麼在使用該屬性的元素上不設置定位或者手動設置定位爲static

 position: static

          這樣會解決部分由於定位(relative、fixed、absolute)致使的頁面偶爾不能滾動的bug。

    3.2 若是添加動態內容頁面不能滾動,讓子元素height+1

          若是在-webkit-overflow-scrolling:touch屬性的元素上,想經過動態添加內容來撐開容器,觸發滾動,是有bug 的,頁面是會卡住不動的。

          解決方法就是在webkit-overflow-scrolling:touch屬性的下一層子元素上,將height加1%或1px。從而主動觸發scrollbar

 

    以上是本身在項目過程當中遇到的坑,若是小可愛們有發現新的坑,歡迎告知!

相關文章
相關標籤/搜索