手機上滑動卡卡嗎?來試試看overflow-scrolling吧!

0
44

不知道大家有沒有過電腦上滑動很順,但到手機上滑動就很卡的經驗?

尤其是選單部分,像是點擊漢堡鈕後,左側滑出選單的效果,當子分類一多需要往下滑,

就容易發生卡卡的問題,常要手指多滑兩三次,選單才會到底。

容易出現上述情況如下圖:

 

%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2016-10-17-%e4%b8%8b%e5%8d%885-00-43

 

那該如何解決這個問題呢?

來吧!其實很簡單,沒這麼難。

我們只要在CSS內加入這行,應該會有很明顯效果。

-webkit-overflow-scrolling: touch;

 

 

完整CSS示範代碼可以用 (*記得用手機測試):

div.test{
   height:240px;
   overflow:hidden;
   overflow-y:auto;
   -webkit-overflow-scrolling: touch;
}

 

如此一來,這麻煩的問題是不是就解決了呢?

可別小看CSS呢~

希望有幫助到大家!

 

frankbite-關注UI設計/前端/網頁,如果你喜歡我們的文章,歡迎 Follow 我們的 Facebook 專頁,我們將不吝嗇的為你提供最新、最實用的資訊!

%e6%9c%aa%e5%91%bd%e5%90%8d-1_03