移動端 滾動區域優化方法總結

在做移動端前端開發過程中，我們經常會遇到滾動區域，而在ios和android上，滾動區域的表現也不一樣，例如滾動條的樣子就不一樣，有圖有真相

所以第一步：統一長相！

/*

整體部分
*/::-webkit-scrollbar{}
/*滑動軌道
*/::-webkit-scrollbar-track{}
/*滑塊
*/::-webkit-scrollbar-thumb{}
/*滑塊效果
*/::-webkit-scrollbar-thumb:hover{}

由於移動端沒有hover狀態，所以滑塊效果這個可以去掉。廢話不多說，上demo

（注：用chrome開啟）請戳->:

手機可掃：

至此，ios和android上滾動條樣子統一了，世界充滿了平等

高階第二步：優化滑動效果

瀏覽器自帶的滑動卡卡的，體驗稍稍有些不好，所以改進下！

方案一：允許獨立的滾動區域和觸控回彈（webkit獨有）

-webkit-overflow-scrolling: touch

缺點：只有ios支援、且在ios上滾動條樣式丟失

方案二：運用iscroll.js

優點：相容ios和android

缺點：**繁瑣、不好維護

總結：

1、在實際專案中、一般利用webkit屬性來統一滾動條樣子，不使用iscroll.js。

2、在專案要求較高的情況下：使用iscroll.js來模擬滾動區域

3、不推薦使用-webkit-overflow-scrolling : touch;這個屬性，相容不好，而且會有bug

移動端開發 關於區域性區域滾動總結 實戰系列

在移動端開發的時候經常會碰到區域滾動的需求，當然實現起來也是非常簡單的，給需要滾動的元素定高然後新增乙個overflow y scorll自然就可以滾動了，但是新增這個屬性之後，使用chrome或者其他瀏覽器工具除錯時是支正常的，但是到手機上時滾動效果就十分的奇怪，滾動會讓人感覺有卡頓感。這個時候使...

Unity移動端優化總結

模型面數和頂點數的控制 unity這邊沒辦法控制.就需要和做三維的同事交流好 指令碼新建的指令碼缺省會建立出update函式.在不需要用到的情況下可以刪掉 盡量不要在update函式中做複雜運算,盡量不要在update函式中使用find,getcomponent這類的呼叫 只在乙個指令碼中使用ong...

移動端滾動穿透解決方法

當頁面中出現彈層時，彈層頁面滾動也會引起body的滾動，解決方法如下 開啟彈層時獲取當前頁面的滾動值，並給body設定position fixed top 當前頁面的滾動值 var scrollpx body scrolltop body addclass openfixed body css to...