在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 關(guān)于手機(jī)瀏覽器橫向縱向超出，可以滾動(dòng)，但是不是顯示滾動(dòng)條是怎么實(shí)現(xiàn)的，如下圖

關(guān)于手機(jī)瀏覽器橫向縱向超出，可以滾動(dòng)，但是不是顯示滾動(dòng)條是怎么實(shí)現(xiàn)的，如下圖

問題

怎么實(shí)現(xiàn)這種效果，不使用插件，不使用webkit偽類隱藏滾動(dòng)條

實(shí)際效果

1.手機(jī)網(wǎng)頁京東，縱向，可以上下滾動(dòng)
2.手機(jī)網(wǎng)頁百度，橫向，可以左右滾動(dòng)
clipboard.png

clipboard.png

回答
編輯回答
巫婆

主要是控制overflow吧，父元素固定高度或者寬度，子元素控制好overflow

圖片描述

<div class="top">頂部</div>
<div style="display: inline-block;width: 20%;">
    <div>
        <ul>
            <li class="test-li">菜單1</li>
            <li class="test-li">菜單2</li>
            <li class="test-li">菜單3</li>
            <li class="test-li">菜單4</li>
            <li class="test-li">菜單5</li>
            <li class="test-li">菜單6</li>
            <li class="test-li">菜單7</li>
            <li class="test-li">菜單8</li>
            <li class="test-li">菜單9</li>
            <li class="test-li">菜單10</li>
            <li class="test-li">菜單11</li>
            <li class="test-li">菜單12</li>
            <li class="test-li">菜單13</li>
            <li class="test-li">菜單14</li>
            <li class="test-li">菜單15</li>
            <li class="test-li">菜單16</li>
            <li class="test-li">菜單17</li>
            <li class="test-li">菜單18</li>
        </ul>
    </div>
</div>
<div style="display: inline-block;width: 78%"></div>
<div class="bottom">底部</div>

<style>
    * {
        margin: 0;
        padding: 0;
        }

    ul {
        list-style: none;
        height: 70vh;
        overflow-y: auto;
    }

    .top,
    .bottom {
        width: 100%;
        height: 100px;
        background-color: aqua;
        text-align: center;
        font-size: 2rem;
        line-height: 100px;
    }

    .test-li {
        background-color: grey;
        text-align: center;
        padding: 10px;
        border-bottom: 1px solid #eee;
    }
</style>
2018年5月12日 16:08
編輯回答
大濕胸

當(dāng)然自己監(jiān)聽 touchstart touchmove touchend 動(dòng)態(tài)修改 style transform: translate() 也是可以的，就是有點(diǎn)麻煩。。。

2017年6月7日 09:16
編輯回答
空痕

控制臺(tái)查一下咯。無非就是把滾動(dòng)條隱藏了

clipboard.png

2017年9月30日 02:04
編輯回答
野橘
html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}
2018年4月6日 06:14