css隐蔽挪移端滚动条并平滑滚动（代码示例）

?本篇文章给大家带来的内容是对于css隐蔽挪移端滚动条并平滑滚动（代码示例），有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。

本篇文章给大家带来的内容是对于css隐蔽挪移端滚动条并平滑滚动（代码示例），有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。

HTML代码如下

设定滚动条隐蔽

.par-type ::-webkit-scrollbar {display: none;}

此时内容可以正常滚动，滚动条也已隐蔽，但是ios手机上涌现滚动不流通，影响会员的体验，安卓手机上是正常的。此时，加上css代码：-webkit-overflow-scrolling: touch;即可解决，如下：

.type {
        height: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        background-color: #999;
        /*解决ios上滑动不流通*/
        -webkit-overflow-scrolling: touch;
    }

但是此时又会涌现新的题目，滚动条又涌现了！！！
为了会员的体验，最佳是能流通滚动而且滚动条是隐蔽的，接下来开端放大招了。。。
滚动条是涌现在type标签上的，所以对type进行如下设定：

.type {
        /*width: 100%;*/
        height: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        background-color: #999;
        /*解决ios上滑动不流通*/
        -webkit-overflow-scrolling: touch;
        /*纵向超出局部将会隐蔽，即滚动条局部被挤出可视区域*/
        padding-bottom: 20px;
    }

ps:
1.type的外层容器设定了牢固高度，而且设定了内容溢出隐蔽，所有type的纵向的超出内容是不成见的，即：overflow:hidden;
2.padding-bottom等于20px并非牢固值，只有你的设定的值大小脚够将滚动条挤出可视区域即可。

完备代码如下：

以上就是css隐蔽挪移端滚动条并平滑滚动（代码示例）的细致内容，更多请关注 百分百源码网 其它相干文章！