With regard to the horizontal and vertical movement of the mobile browser, you can scroll, but it does not show how the scroll bar is implemented, as shown in the following figure

< H2 > question < / H2 >

how to achieve this effect, do not use plug-ins, do not use webkit pseudo-classes to hide scroll bars

< H2 > actual effect < / H2 >

1. The mobile web page JD.com, vertically, can scroll up and down
2. Baidu mobile web page, horizontal, you can scroll
clipboard.png

clipboard.png

Javascript
Mar.31,2021

check the console. It's nothing more than hiding the scroll bar

.

clipboard.png

overflowoverflow

<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 -sharpeee;
    }
</style>

of course, it's OK to listen to touchstart touchmove touchend and modify style transform: translate () dynamically, but it's a bit of a hassle.

Previous: Python3.7 installation-Pip3 shows ssl problems-openssl does not install

Next: How does js modify the key value of an object?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu