成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

wangzy2019 / 3702人閱讀

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

HTML代碼如下 




    
    
    
    移動端隱藏滾動條解決方案
設(shè)置滾動條隱藏 
.par-type ::-webkit-scrollbar {display: none;}

此時內(nèi)容可以正常滾動，滾動條也已隱藏，但是ios手機(jī)上出現(xiàn)滾動不流暢，影響用戶的體驗(yàn)，安卓手機(jī)上是正常的。此時，加上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)了！??！
為了用戶的體驗(yàn)，最好是能流暢滾動并且滾動條是隱藏的，接下來開始放大招了。。。
滾動條是出現(xiàn)在type標(biāo)簽上的，所以對type進(jìn)行如下設(shè)置：

.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的外層容器設(shè)置了固定高度，并且設(shè)置了內(nèi)容溢出隱藏，所有type的縱向的超出內(nèi)容是不可見的，即：overflow:hidden;
2.padding-bottom等于20px并非固定值，只要你的設(shè)置的值大小足夠?qū)L動條擠出可視區(qū)域即可。

完整代碼如下：





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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117289.html

相關(guān)文章

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

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

    Karrdy 評論0 收藏0

  • 移動端實(shí)現(xiàn)內(nèi)滾動的4種方案

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

    CodeSheep 評論0 收藏0

  • 移動端實(shí)現(xiàn)內(nèi)滾動的4種方案

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

    singerye 評論0 收藏0

  • 移動端實(shí)現(xiàn)內(nèi)滾動的4種方案

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

    lscho 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<