隐藏滚动条同时具有滚动效果

方法一：限于支持CSS3的浏览器

chrome 和 Safari（亲测，其他两种浏览器未亲测）

.element::webkit-scrollbar{
    display:none;
}

    <style>
        .ddd::-webkit-scrollbar{
            display: none;
        }
        .ddd{
            overflow-y: auto;
            margin: 0 auto;
            width:300px;
            height:200px;
            border:1px solid black;
        }
        p{
            text-align: center;
        }
    </style>

    <p>不显示滚动条的垂直滚动功能</p>
    <div class="ddd">
            <p>111111111111111111</p>
            <p>222222222222222222</p>
            <p>333333333333333333</p>
            <p>444444444444444444</p>
            <p>555555555555555555</p>
            <p>666666666666666666</p>
            <p>7777777777777777777</p>
            <p>8888888888888888888</p>
            <p>9999999999999999999</p>
            <p>1010101010101010101</p>
    </div>

IE10+ 

.element{
    -ms-overflow-style:none;
}

Firefox

.element{
    overflow:-moz-scrollbars-none;
}

方法二：通过向右/向下移动滚动条的宽度/高度距离，手动隐藏掉滚动条

其中向右/向下移动的距离要自己测试，情况不同

    <style>
        .father{
            position: relative;
            width:300px;
            height:200px;
            overflow: hidden;
            border:1px solid black;
        }
        .son{
            position: absolute;
            overflow-y: auto;
            height:100%;
            margin: 0 auto;
            right:-17px;
            width:100%;
        }
    <style>

    <p>不显示滚动条的滚动功能</p>
    <div class="father">
        <div class="son">
                <p>111111111111111111</p>
                <p>222222222222222222</p>
                <p>333333333333333333</p>
                <p>444444444444444444</p>
                <p>555555555555555555</p>
                <p>666666666666666666</p>
                <p>7777777777777777777</p>
                <p>8888888888888888888</p>
                <p>9999999999999999999</p>
                <p>1010101010101010101</p>
        </div>
    </div>

网上还有第三种方法，该方法最终还是使用了 .element::-webkit-scrollbar样式，所以，个人认为既然这样,不如直接使用方法一，因此不做总结。

 

内容参考：https://www.22vd.com/34803.html