css隱藏移動端滾動條并且ios上平滑滾動

wangzy2019 發(fā)布于2019-08-30 15:55 / 3684人閱讀

摘要：完整代碼如下移動端隱藏滾動條解決方案解決上滑動不流暢推薦娃娃日用品美妝護膚娃娃日用品美妝護膚娃娃

HTML代碼如下





    
    
    
    移動端隱藏滾動條解決方案
    


    
        
            
                推薦
                娃娃
                日用品
                美妝護膚
                娃娃
                日用品
                美妝護膚
                娃娃

設置滾動條隱藏

.par-type ::-webkit-scrollbar {display: none;}

此時內容可以正常滾動，滾動條也已隱藏，但是ios手機上出現(xiàn)滾動不流暢，影響用戶的體驗，安卓手機上是正常的。此時，加上css代碼：-webkit-overflow-scrolling: touch;即可解決，如下：

.type {
        height: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        background-color: #999;
        /*解決ios上滑動不流暢*/
        -webkit-overflow-scrolling: touch;
    }

但是此時又會出現(xiàn)新的問題，滾動條又出現(xiàn)了！！！
為了用戶的體驗，最好是能流暢滾動并且滾動條是隱藏的，接下來開始放大招了。。。
滾動條是出現(xiàn)在type標簽上的，所以對type進行如下設置：

.type {
        /*width: 100%;*/
        height: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        background-color: #999;
        /*解決ios上滑動不流暢*/
        -webkit-overflow-scrolling: touch;
        /*縱向超出部分將會隱藏，即滾動條部分被擠出可視區(qū)域*/
        padding-bottom: 20px;
    }

ps:
1.type的外層容器設置了固定高度，并且設置了內容溢出隱藏，所有type的縱向的超出內容是不可見的，即：overflow:hidden;
2.padding-bottom等于20px并非固定值，只要你的設置的值大小足夠將滾動條擠出可視區(qū)域即可。

完整代碼如下：





    
    
    
    移動端隱藏滾動條解決方案
    


    
        
            
                推薦
                娃娃
                日用品
                美妝護膚
                娃娃
                日用品
                美妝護膚
                娃娃

GPU云服務器云服務器 css滾動條滾動條css html 滾動條 css ios tableview滾動條

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117289.html

css隱藏移動端滾動條并且ios上平滑滾動

摘要：完整代碼如下移動端隱藏滾動條解決方案解決上滑動不流暢推薦娃娃日用品美妝護膚娃娃日用品美妝護膚娃娃 HTML代碼如下移動端隱藏滾動條解決方案 * { padding: 0; margin: 0; } .par-type { height: 50px; ...

Karrdy 2019-08-02 14:10 評論0 收藏0
移動端實現(xiàn)內滾動的4種方案

摘要：部分區(qū)域固定其余區(qū)域滾動部分區(qū)域固定為頁面的部分設置以及，即禁用頁面原生的滾動，保證只會顯示一屏的內容。但是單位對低版本安卓和支持不夠好，微信瀏覽器內核不支持，雖然已經(jīng)升級到內核，但是為了確保萬無一失，放棄采用這種方案。如果在一個區(qū)域內只允許部分區(qū)域產(chǎn)生滾動的效果，而其余部分不能移動，你會采用什么方法呢？作者：Icarus原文鏈接：http://xdlrt.github.io/20...

CodeSheep 2019-08-30 13:13 評論0 收藏0
移動端實現(xiàn)內滾動的4種方案

摘要：部分區(qū)域固定其余區(qū)域滾動部分區(qū)域固定為頁面的部分設置以及，即禁用頁面原生的滾動，保證只會顯示一屏的內容。但是單位對低版本安卓和支持不夠好，微信瀏覽器內核不支持，雖然已經(jīng)升級到內核，但是為了確保萬無一失，放棄采用這種方案。如果在一個區(qū)域內只允許部分區(qū)域產(chǎn)生滾動的效果，而其余部分不能移動，你會采用什么方法呢？作者：Icarus原文鏈接：http://xdlrt.github.io/20...

singerye 2019-08-22 10:46 評論0 收藏0
移動端實現(xiàn)內滾動的4種方案

摘要：部分區(qū)域固定其余區(qū)域滾動部分區(qū)域固定為頁面的部分設置以及，即禁用頁面原生的滾動，保證只會顯示一屏的內容。但是單位對低版本安卓和支持不夠好，微信瀏覽器內核不支持，雖然已經(jīng)升級到內核，但是為了確保萬無一失，放棄采用這種方案。如果在一個區(qū)域內只允許部分區(qū)域產(chǎn)生滾動的效果，而其余部分不能移動，你會采用什么方法呢？作者：Icarus原文鏈接：http://xdlrt.github.io/20...

lscho 2019-08-01 16:04 評論0 收藏0