let div = document.createElement("div");
let _scrollNode = document.querySelector("[css-id='scroll']") || null;
if (_scrollNode) {
document.querySelector("head").removeChild(document.querySelector("[css-id='scroll']"));
div.innerHTML = scrollStyle;
let newScrollNode = div.querySelector("[css-id='scroll']");
document.getElementsByTagName("head")[0].appendChild(newScrollNode)
scroll('#e5e7eb')
横轴的滚动条
::-webkit-scrollbar
//js 动态修改滚动条样式 透明背景 参数 滚动条颜色
function scroll(color) {
let scrollStyle = `
<style css-id="scroll">
/* 滚动条 */
/*定义整个滚动条高宽及背景：高宽分别对应横竖滚动条的尺寸 滚动条宽度 滚动条轨道背景颜色*/
::-webkit-scrollbar
width:20px;
background-color:#F5F5F54a;
/*定义滚动条轨道：内阴影+圆角 + 轨道背景颜色*/
::-webkit-scrollbar-track
/* background-color:#f5f5f5;*/
/*定义滑块：内阴影+圆角*/
::-webkit-scrollbar-thumb
border-radius:10px;
background-color:${color};
</style>
let div = document.createElement("div");
let _scrollNode = document.querySelector("[css-id='scroll']") || null;
if (_scrollNode) {
document.querySelector("head").removeChild(document.querySelector("[css-id='scroll']"));
div.innerHTML = scrollStyle;
let newScrollNode = div.querySelector("[css-id='scroll']");
document.getElementsByTagName("head")[0].appendChild(newScrollNode)
scroll('#ffffff')
::-webkit-scrollbar-thumb:vertical {
background: rgba(0,0,0,0.61);
-webkit-border-radius: 80px;
/* 鼠标滑过的滚动条样式 */
::-webkit-scrollbar-thumb:vertical:hover {
background: rgba(0,0,0,0.61);
-webkit-border-radius: 80px;
/* 鼠标点击滚动条之后的样式 */
::-webkit-scrollbar-thumb:vertical:active {
background: rgba(0,0,0,0.61);
-webkit-border-radius: 80px;
如果你构建一个很有特色和创意的网页，那么肯定希望定义网页中的
滚动条
样式
，这方面的 jQuery 插件比较不错的，有两个：
jS
crollPane和mCustomScrollbar。
关于
jS
crollPane，大家见过的可能比较多，但是这个插件太过于古老而且功能不强大，效果在几年前非常不错，但是放在现在就不好说了。所以我选择了后者：mCustomScrollbar。下图是两者官方示...
CSS设置
滚动条
样式
因为在现在的大部分项目中很多都用到了
滚动条
，有时候用到模拟的
滚动条
，现在说下
滚动条
的CSS也能解决。
比如网易邮箱的
滚动条
样子很好看，就是利用的CSS来设置的，而且是webkit浏览器的。
一：webkit的CSS设置
滚动条
1.1 主要有下面7个属性::-webkit-scrollbar
滚动条
整体部分，可以设置宽度啥的
::-webkit-scrollbar-butto
前端
可以通过CSS来更改下拉
滚动条
的
样式
。根据引用[1]和引用[2]的内容，可以看出在一些框架中已经对
滚动条
的
样式
进行了美化，所以你可能不需要自己
修改
滚动条
的
样式
。如果你想
自定义
滚动条
的
样式
，可以使用CSS的伪元素选择器和
滚动条
相关的属性来实现。
根据引用[2]和引用[3]的内容，你可以使用以下CSS代码来更改
滚动条
的
样式
：
```css
/* Webkit浏览器（Chrome、Safari）
滚动条
样式
*/
::-webkit-scrollbar {
width: 10px; /* 设置
滚动条
宽度 */
::-webkit-scrollbar-thumb {
background-color: #fcfcfc; /* 设置
滚动条
滑块的颜色 */
::-webkit-scrollbar-track {
background-color: #1589ce; /* 设置
滚动条
背景色 */
/* Firefox浏览器
滚动条
样式
*/
/* Firefox不支持
修改
滚动条
的颜色，只能
修改
滚动条
的宽度和背景色 */
/* 可以使用伪元素选择器来
修改
滚动条
的
样式
*/
/* 例如： */
div::-moz-scrollbar {
width: 10px; /* 设置
滚动条
宽度 */
div::-moz-scrollbar-thumb {
background-color: #fcfcfc; /* 设置
滚动条
滑块的颜色 */
div::-moz-scrollbar-track {
background-color: #1589ce; /* 设置
滚动条
背景色 */
请注意，不同浏览器对
滚动条
的
样式
支持程度不同，所以以上代码可能在不同浏览器中表现不一致。建议在实际使用中进行测试和调整。
【异常】JDK21报错NoSuchFieldError: Class com.sun.tools.javac.tree.JCTree$JCImport does not have member fie
17262
【异常】JDK21报错NoSuchFieldError: Class com.sun.tools.javac.tree.JCTree$JCImport does not have member fie
wuhunyu:
【前端】JS实现SQL格式化
善良恶霸:
【前端】JS实现SQL格式化
我是Superman丶:
