html 隐藏滚动条,css如何隐藏滚动条？

在一个固定窗口内我们做一个可滚动的菜单的时候经常会出现很宽的滚动条，这样不仅影响美观而且影响布局，那么如何隐藏滚动条？如何下面我们来看一下使用css隐藏滚动条的方法，希望对大家有所帮助。

CSS伪类选择器::-webkit-scrollbar可以影响了一个元素的滚动条的样式。

语法：::-webkit-scrollbar { styles here }

我们可以通过::-webkit-scrollbar选择器设置display属性为none来隐藏滚动条。

css滚动条选择器

我们可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式：::-webkit-scrollbar — 整个滚动条。

::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头)。

::-webkit-scrollbar-thumb — 滚动条上的滚动滑块。

::-webkit-scrollbar-track — 滚动条轨道。

::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分。

::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分。

::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮)。

隐藏滚动条的方法：

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

效果图：

设置css效果前：

使用css设置滚动条不显示效果：