成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

css隱藏移動(dòng)端滾動(dòng)條并且ios上平滑滾動(dòng)

Karrdy / 2884人閱讀

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

HTML代碼如下 




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

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

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

但是此時(shí)又會(huì)出現(xiàn)新的問(wèn)題，滾動(dòng)條又出現(xiàn)了?。。?/strong>
為了用戶的體驗(yàn)，最好是能流暢滾動(dòng)并且滾動(dòng)條是隱藏的，接下來(lái)開(kāi)始放大招了。。。
滾動(dòng)條是出現(xiàn)在type標(biāo)簽上的，所以對(duì)type進(jìn)行如下設(shè)置：

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

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

完整代碼如下：





    
    
    
    移動(dòng)端隱藏滾動(dòng)條解決方案

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/53625.html

相關(guān)文章

  • css隱藏移動(dòng)端滾動(dòng)條并且ios上平滑滾動(dòng)

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

    wangzy2019 評(píng)論0 收藏0

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

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

    CodeSheep 評(píng)論0 收藏0

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

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

    singerye 評(píng)論0 收藏0

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

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

    lscho 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<