資訊專欄INFORMATION COLUMN
摘要：完整代碼如下移動端隱藏滾動條解決方案解決上滑動不流暢推薦娃娃日用品美妝護膚娃娃日用品美妝護膚娃娃
HTML代碼如下
移動端隱藏滾動條解決方案
設置滾動條隱藏
.par-type ::-webkit-scrollbar {display: none;}
此時內容可以正常滾動，滾動條也已隱藏，但是ios手機上出現滾動不流暢，影響用戶的體驗，安卓手機上是正常的。此時，加上css代碼：-webkit-overflow-scrolling: touch;即可解決，如下：
.type {
height: 100%;
overflow-x: scroll;
overflow-y: hidden;
background-color: #999;
/*解決ios上滑動不流暢*/
-webkit-overflow-scrolling: touch;
}
但是此時又會出現新的問題，滾動條又出現了?。?！
為了用戶的體驗，最好是能流暢滾動并且滾動條是隱藏的，接下來開始放大招了。。。
滾動條是出現在type標簽上的，所以對type進行如下設置：
.type {
/*width: 100%;*/
height: 100%;
overflow-x: scroll;
overflow-y: hidden;
background-color: #999;
/*解決ios上滑動不流暢*/
-webkit-overflow-scrolling: touch;
/*縱向超出部分將會隱藏，即滾動條部分被擠出可視區域*/
padding-bottom: 20px;
}
ps:
1.type的外層容器設置了固定高度，并且設置了內容溢出隱藏，所有type的縱向的超出內容是不可見的，即：overflow:hidden;
2.padding-bottom等于20px并非固定值，只要你的設置的值大小足夠將滾動條擠出可視區域即可。
完整代碼如下：
移動端隱藏滾動條解決方案
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53625.html
摘要：完整代碼如下移動端隱藏滾動條解決方案解決上滑動不流暢推薦娃娃日用品美妝護膚娃娃日用品美妝護膚娃娃 HTML代碼如下 移動端隱藏滾動條解決方案 * { padding: 0; margin: 0; } .par-type { height: 50px; ...
摘要：部分區域固定其余區域滾動部分區域固定為頁面的部分設置以及，即禁用頁面原生的滾動，保證只會顯示一屏的內容。但是單位對低版本安卓和支持不夠好，微信瀏覽器內核不支持，雖然已經升級到內核，但是為了確保萬無一失，放棄采用這種方案。 如果在一個區域內只允許部分區域產生滾動的效果，而其余部分不能移動，你會采用什么方法呢？ 作者：Icarus原文鏈接：http://xdlrt.github.io/20...
摘要：部分區域固定其余區域滾動部分區域固定為頁面的部分設置以及，即禁用頁面原生的滾動，保證只會顯示一屏的內容。但是單位對低版本安卓和支持不夠好，微信瀏覽器內核不支持，雖然已經升級到內核，但是為了確保萬無一失，放棄采用這種方案。 如果在一個區域內只允許部分區域產生滾動的效果，而其余部分不能移動，你會采用什么方法呢？ 作者：Icarus原文鏈接：http://xdlrt.github.io/20...
摘要：部分區域固定其余區域滾動部分區域固定為頁面的部分設置以及，即禁用頁面原生的滾動，保證只會顯示一屏的內容。但是單位對低版本安卓和支持不夠好，微信瀏覽器內核不支持，雖然已經升級到內核，但是為了確保萬無一失，放棄采用這種方案。 如果在一個區域內只允許部分區域產生滾動的效果，而其余部分不能移動，你會采用什么方法呢？ 作者：Icarus原文鏈接：http://xdlrt.github.io/20...
閱讀 2892·2021-09-22 15:54
閱讀 1892·2019-08-30 15:53
閱讀 2245·2019-08-29 16:33
閱讀 1422·2019-08-29 12:29
閱讀 1394·2019-08-26 11:41
閱讀 2373·2019-08-26 11:34
閱讀 2954·2019-08-23 16:12
閱讀 1425·2019-08-23 15:56
