css如何去隐藏滚动条-猿码集

1. 概述

在Web开发中，有时候需要隐藏页面中的滚动条，来达到更好的用户体验。本文将详细讲解如何使用CSS来去隐藏滚动条。

2. 隐藏垂直滚动条

隐藏页面中的垂直滚动条，有多种方法可以实现，但是最为简单的方式是使用CSS的伪类选择器::-webkit-scrollbar，这个选择器是专门用来规定滚动条的样式以及滚动条上的伪类元素样式。

2.1 隐藏滚动条

要隐藏垂直滚动条，只需简单地将::-webkit-scrollbar伪类的宽度属性设置为0即可。


 /*隐藏垂直滚动条*/ 
::-webkit-scrollbar {
    width: 0;
}

注意：

这种方法只对WebKit浏览器（Chrome、Safari等）有效。

2.2 隐藏滚动条上的按钮

如果只需要隐藏滚动条上的按钮（也就是滚动条两边的上下箭头），可以将::-webkit-scrollbar-button伪类的显示属性设置为none。


/*隐藏滚动条上的按钮*/
::-webkit-scrollbar-button {
    display: none;
}

2.3 隐藏滚动条的轨道

要隐藏滚动条的轨道（指滚动条中间的那部分），需要将::-webkit-scrollbar-track伪类的背景颜色设置为透明色transparent。


/*隐藏滚动条的轨道*/
::-webkit-scrollbar-track {
    background-color: transparent;
}

2.4 隐藏滚动条的滑块

如果需要隐藏滚动条的滑块，即滚动条上上下拖动实现滚动的那部分，需要将::-webkit-scrollbar-thumb伪类的背景颜色属性设置为透明色，同时将高度设置为0或某个很小的值。


/*隐藏滚动条的滑块*/
::-webkit-scrollbar-thumb {
    background-color: transparent;
    height: 0.2rem;
}

3. 隐藏水平滚动条

与隐藏垂直滚动条类似，要隐藏水平滚动条也需要使用::-webkit-scrollbar伪类选择器。

3.1 隐藏滚动条

隐藏水平滚动条只需将::-webkit-scrollbar伪类的高度属性设置为0。


/*隐藏水平滚动条*/
::-webkit-scrollbar {
    height: 0;
}

3.2 隐藏滚动条上的按钮

如果只需要隐藏滚动条上的按钮，可以将::-webkit-scrollbar-button:horizontal伪类的显示属性设置为none。


/*隐藏滚动条上的按钮*/
::-webkit-scrollbar-button:horizontal {
    display: none;
}

3.3 隐藏滚动条轨道

要隐藏水平滚动条的轨道，需要将::-webkit-scrollbar-track:horizontal伪类的背景颜色设置为透明色。


/*隐藏滚动条轨道*/
::-webkit-scrollbar-track:horizontal {
    background-color: transparent;
}

3.4 隐藏滚动条的滑块

如果需要隐藏水平滚动条的滑块，只需将::-webkit-scrollbar-thumb:horizontal伪类的背景颜色属性设置为透明色，高度同样设置为0或某个很小的值。


/*隐藏滚动条的滑块*/
::-webkit-scrollbar-thumb:horizontal{
    background-color: transparent;
    height: 0.2rem;
}

4. 兼容多种浏览器的解决方案

上述的方法只适用于采用WebKit内核的浏览器，为了兼容其他的浏览器，可以使用CSS中的scrollbar-width属性和scrollbar-color属性。

4.1 scrollbar-width属性

scrollbar-width属性是CSS的一种标准属性，用来规定滚动条的宽度。这个属性取值有auto和thin两个值。在一些浏览器中，自动去隐藏滚动条是默认选项，而在另一些浏览器中，默认的滚动条宽度比较宽，为了统一表现效果，可以将属性值设置为thin，然后再根据需要去隐藏滚动条。


/*Webkit内核的浏览器*/
::-webkit-scrollbar {
    width: 0;
}
/*兼容其他浏览器*/
body {
    scrollbar-width: thin;
}

4.2 scrollbar-color属性

scrollbar-color属性用来设置滚动条的颜色。这个属性需要两个值，分别表示滑块和轨道的颜色。其中，auto表示默认颜色，也就是浏览器默认的颜色，可以使用各种CSS颜色值来代替auto来自定义滚动条的颜色，达到更好的视觉效果。


/*Webkit内核的浏览器*/
::-webkit-scrollbar {
    width: 0;
}
/*兼容其他浏览器*/
body {
    scrollbar-width: thin;
    scrollbar-color: #f1f1f1 #c1c1c1;
}

5. 结论

本文介绍了多种方案来隐藏页面中的滚动条，包括隐藏垂直和水平滚动条、隐藏滚动条上的按钮、隐藏滚动条轨道和隐藏滚动条滑块。另外，为了兼容更多类型的浏览器，还介绍了使用scrollbar-width属性和scrollbar-color属性的方法。这些方法可以用在不同类型的项目中，取决于个人需求。

css如何去隐藏滚动条