关于手机浏览器横向纵向超出，可以滚动，但是不是显示滚动条是怎么实现的，如下图

Question

问题

怎么实现这种效果，不使用插件，不使用webkit伪类隐藏滚动条

实际效果

1.手机网页京东，纵向，可以上下滚动
2.手机网页百度，横向，可以左右滚动

Answer 1

控制台查一下咯。无非就是把滚动条隐藏了

Answer 2

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;
}

Answer 3

主要是控制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>

Answer 4

当然自己监听 touchstart touchmove touchend 动态修改 style transform: translate() 也是可以的，就是有点麻烦。。。