用CSS隐藏Firefox滚动条的勘误

这是一个比较入门的问题,但我之前没遇到到过这个问题。今天在网上看了一些文章,有些并不可行,特此记录。

下面是一整段代码,通过备注可以看出哪些是有用的。

html::-webkit-scrollbar {
  display: none; /* Chrome 或 Safari 可以用此方法隐藏滚动条,这在Chrome89下测试是OK的*/
}
html {
	/*隐藏滚动条,当IE下溢出,仍然可以滚动,这在IE11是OK的*/
	-ms-overflow-style:none;
	/*火狐下隐藏滚动条*/
	scrollbar-width:none;   /* 这在firefox88下测试是ok的 */
        /* overflow:-moz-scrollbars-none;    注意:网上有很多人提到这种写法,在Firefox88下是不行的。 */
}

结论:overflow:-moz-scrollbars-none; 这个属性是无效的。如果你有不同看法,欢迎在下方留言。

其他解题思路

其实这个问题还可以换一种思路来考虑,我们不用过分纠缠滚动条如何隐藏,只要让对象的宽度不过大就行了嘛!具体来说就是让body的横向溢出隐藏就可以在Chrome和Firefox完美解决水平滚动条问题。

body{ overflow-x:hidden;}

发表评论