自定义CSS滚动条样式

一、CSS滚动条样式修改

默认情况下滚动条的样式由系统自行决定，但是我们可以通过CSS样式修改来实现自定义滚动条的效果。

以下是修改滚动条样式的CSS代码：

/* 宽、高分别为垂直滚动条、水平滚动条的尺寸 */
::-webkit-scrollbar {
	width: 10px;
    height: 10px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background-color: #f5f5f5;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    background-color: #000000;
}

/* 鼠标悬停在滚动条上的滑块 */
::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

其中，::-webkit-scrollbar为外部包裹，修改滚动条尺寸；::-webkit-scrollbar-track为滚动条轨道部分样式；::-webkit-scrollbar-thumb为滚动条滑块部分样式；::-webkit-scrollbar-thumb:hover为鼠标悬停在滚动条上的滑块样式。

二、CSS隐藏滚动条样式

如果想要隐藏滚动条本身，可以使用以下CSS样式：

/* 隐藏滚动条本身 */
::-webkit-scrollbar {
    display: none;
}

这样可以在视觉上隐藏滚动条，但仍可以使用滚轮或键盘控制滚动。

三、CSS横向滚动条样式

如果需要自定义横向滚动条样式，可以使用以下CSS样式：

/* 横向滚动条 */
::-webkit-scrollbar {
    height: 10px;
    background-color: #f5f5f5; 
}

/* 横向滚动条滑块 */
::-webkit-scrollbar-thumb {
    background-color: #000000;
}

/* 鼠标悬停在滚动条上的滑块 */
::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

同样，使用::-webkit-scrollbar包裹，通过height属性来设定横向滚动条的尺寸。

四、CSS好看的滚动条样式

如果需要自定义好看的滚动条样式，可以使用下面的CSS样式：

/* 滚动条轮廓 */
::-webkit-scrollbar {
	width: 10px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background: linear-gradient(to bottom, #000000 0%, #434343 100%);
	box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

/* 鼠标悬停在滚动条上的滑块 */
::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(to bottom, #555555 0%, #666666 100%);
	box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

该样式使用圆角轨道和滑块，并且添加了阴影效果，让整个滚动条看起来更具立体感。

五、火狐CSS修改滚动条样式

火狐浏览器同样可以使用CSS样式来修改滚动条的样式。以下是火狐浏览器的CSS代码：

/* 火狐滚动条轮廓 */
* {
	scrollbar-width: thin;
	scrollbar-color: #000000 #f5f5f5;
}

/* 火狐滚动条轨道 */
*::-webkit-scrollbar-track {
	background: #f5f5f5;
}

/* 火狐滚动条滑块 */
*::-webkit-scrollbar-thumb {
	background: #000000;
}

其中，scrollbar-width: thin;用于修改滚动条的宽度；scrollbar-color: #000000 #f5f5f5;用于修改滚动条的颜色，第一个参数为滑块颜色，第二个为轨道颜色。

六、CSS修改横向滚动条样式

和纵向的滚动条一样，我们也可以对横向滚动条进行样式修改。以下是CSS样式代码：

/* 横向滚动条轮廓 */
* {
	scrollbar-width: thin;
	scrollbar-color: #000000 #f5f5f5;
	overflow-x: scroll;
}

/* 横向滚动条滑块 */
*::-webkit-scrollbar-thumb {
	background-color: #000000;
}

/* 横向滚动条轨道 */
*::-webkit-scrollbar-track {
	background-color: #f5f5f5;
}

横向滚动条的轮廓和纵向的略有不同，在样式代码中我们通过添加overflow-x: scroll;实现横向滚动。

七、CSS设置div滚动条样式

在某些情况下，我们需要对HTML中的div元素实现滚动效果并且自定义滚动条样式。以下是实现该效果的CSS样式：

/* div内垂直滚动条样式 */
.scrollbar {
	height: 300px;
	overflow-y: scroll;
}

/* div滚动条整体样式 */
.scrollbar::-webkit-scrollbar {
	width: 10px;
}

/* 滚动条轨道 */
.scrollbar::-webkit-scrollbar-track {
	background-color: #f5f5f5; 
}

/* 滚动条滑块 */
.scrollbar::-webkit-scrollbar-thumb {
	background-color: #000000; 
}

这里通过给div元素添加样式类scrollbar，然后在该样式中实现滚动条样式修改。

八、CSS怎么设置滚动条样式

实现自定义滚动条样式的关键在于控制::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb这三个CSS属性。下面是一些设定滚动条样式的技巧：

可以使用渐变样式，通过线性渐变或径向渐变来实现更加立体、好看的样式。
可以通过外部包裹滚动条的CSS控制滚动条的宽、高、颜色等属性。
注意不同浏览器可能存在兼容性问题，需进行测试。

原创文章，作者：ETRY，如若转载，请注明出处：https://www.506064.com/n/135497.html