在移动端下如何隐藏 / 删除 / 消失 / 让用户看不见横向滚动条

背景

在移动端下经常会有如下图的需求.

文字描述 : 用户可以横向滚动屏幕查看内容.但是默认情况下会出现一个灰色的滚动条.

如何删除滚动条?

有一种思路:设置父元素超出隐藏内容 , 让子元素刚好比父级元素的高度大一点.这样最下面的内容就可以隐藏掉,达到隐藏其滚动条的效果.

另外一种做法是直接对齐滚动条进行设置: 以下两种方式都可以进行达到让用户看不到滚动条的效果.以下两种对横向滚动条进行操作的样式都可以达到隐藏横向滚动条的效果.

代码

// 设置滚动条的样式
::-webkit-scrollbar { 
    width: 0;
    height: 0;
    }

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

参考

• Css移动端隐藏横向滚动条但可以滚动

• example