滚动条样式处理
方法一、只在谷歌有效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 800px;
height: 500px;
padding: 10px;
margin: 40px auto;
background-color: #edeced;
position: relative;
overflow: auto;
border-radius: 10px;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.container::-webkit-scrollbar {
/*滚动条整体样式*/
width: 10px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
/*定义滑块 内阴影+圆角*/
.container::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px;
background-color: #2D64AB;
/* background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent); */
}
/*定义滚动条轨道 内阴影+圆角*/
.container::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow: inset 0 0 5px rgba(45, 100, 171, 0.4);
background: #ededed;
border-radius: 10px;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
</div>
</body>
</html>
方法二、 jquery.nicescroll.min.js 插件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#content {
width: 200px;
height: 200px;
border: 1px solid #ddd;
overflow: auto;
padding: 10px;
}
#content22 {
width: 400px;
height: 200px;
overflow: auto;
border: 1px solid #ddd;
margin-top: 40px;
padding: 10px;
background-color: #2D64AB;
}
#ascrail2001 {
/* background: rgba(255, 255, 255, 0.4); */
border-radius: 5px;
}
</style>
</head>
<body>
<div id="content"> </div>
<div id="content22"></div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="jquery.nicescroll.min.js"></script>
<script>
$('#content').niceScroll({
cursorcolor: "red",//滚动条的颜色
cursoropacitymax: 1, //滚动条的透明度，从0-1
touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备
cursorwidth: "5px", //滚动条的宽度
cursorborder: "0", // 游标边框css定义
cursorborderradius: "10px",//以像素为光标边界半径 圆角 //autohidemode最好设置为true，这样切换的时候会自动隐藏滚动条
autohidemode: false, //是否隐藏滚动条 true的时候默认不显示滚动条，当鼠标经过的时候显示滚动条
zindex: "auto",//给滚动条设置z-index值
railpadding: { top: 0, right: 0, left: 0, bottom: 0 },//滚动条的位置
background: 'blue'//滚动条的背景色，默认是透明的
});
$('#content22').niceScroll({
cursorcolor: "#fff",//滚动条的颜色
cursoropacitymax: 1, //滚动条的透明度，从0-1
touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备
cursorwidth: "10px", //滚动条的宽度
cursorborder: "0", // 游标边框css定义
cursorborderradius: "10px",//以像素为光标边界半径 圆角 //autohidemode最好设置为true，这样切换的时候会自动隐藏滚动条
autohidemode: false, //是否隐藏滚动条 true的时候默认不显示滚动条，当鼠标经过的时候显示滚动条
zindex: "auto",//给滚动条设置z-index值
railpadding: { top: 0, right: 0, left: 0, bottom: 0 },//滚动条的位置
background: 'rgba(255, 255, 255, 0.4)',
// railpadding: { //置轨道的内间距
// top: 0,
// right: 12,
// left: 0,
// bottom: 0
// }, //滚动条的位置
});
$("#div1").niceScroll({
cursorcolor: "#424242", // 改变滚动条颜色，使用16进制颜色值
cursoropacitymin: 0, // 当滚动条是隐藏状态时改变透明度, 值范围 1 到 0
cursoropacitymax: 1, // 当滚动条是显示状态时改变透明度, 值范围 1 到 0
cursorwidth: "5px", // 滚动条的宽度，单位：便素
cursorborder: "1px solid #fff", // CSS方式定义滚动条边框
cursorborderradius: "5px", // 滚动条圆角（像素）
zindex: "auto", // 改变滚动条的DIV的z-index值（auto或数字）
scrollspeed: 60, // 滚动速度
mousescrollstep: 40, // 鼠标滚轮的滚动速度 (像素)
touchbehavior: false, // 激活拖拽滚动
hwacceleration: true, // 激活硬件加速
boxzoom: false, // 激活放大box的内容
dblclickzoom: true, // (仅当 boxzoom=true时有效)双击box时放大
gesturezoom: true, // (仅 boxzoom=true 和触屏设备时有效) 激活变焦当out/in（两个手指外张或收缩）
grabcursorenabled: true, // (仅当 touchbehavior=true) 显示“抓住”图标display "grab" icon
autohidemode: true, // 隐藏滚动条的方式, 可用的值如下:
/**
true 无滚动时隐藏
"cursor" 隐藏
false 不隐藏,
"leave" 仅在指针离开内容时隐藏
"hidden" 一直隐藏
"scroll" 仅在滚动时显示
**/
background: "", // 轨道的背景颜色
iframeautoresize: true, // 在加载事件时自动重置iframe大小
cursorminheight: 32, // 设置滚动条的最小高度 (像素)
preservenativescrolling: true, // 你可以用鼠标滚动可滚动区域的滚动条和增加鼠标滚轮事件
railoffset: false, // 可以使用top/left来修正位置
bouncescroll: false, // (only hw accell) 启用滚动跳跃的内容移动
spacebarenabled: true, // 当按下空格时使页面向下滚动
railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, // 设置轨道的内间距
disableoutline: true, // 当选中一个使用nicescroll的div时，chrome浏览器中禁用outline
horizrailenabled: true, // nicescroll可以管理水平滚动
railalign: "right", // 对齐垂直轨道
railvalign: "bottom", // 对齐水平轨道
enabletranslate3d: true, // nicescroll 可以使用CSS变型来滚动内容
enablemousewheel: true, // nicescroll可以管理鼠标滚轮事件
enablekeyboard: true, // nicescroll可以管理键盘事件
smoothscroll: true, // ease动画滚动
sensitiverail: true, // 单击轨道产生滚动
enablemouselockapi: true, // 可以用鼠标锁定API标题 (类似对象拖动)
cursorfixedheight: false, // 修正光标的高度（像素）
hidecursordelay: 400, // 设置滚动条淡出的延迟时间（毫秒）
directionlockdeadzone: 6, // 设定死区，为激活方向锁定（像素）
nativeparentscrolling: true, // 检测内容底部便于让父级滚动
enablescrollonselection: true, // 当选择文本时激活内容自动滚动
cursordragspeed: 0.3, // 设置拖拽的速度
rtlmode: "auto", // DIV的水平滚动从左边开始
cursordragontouch: false, // 使用触屏模式来实现拖拽
oneaxismousemode: "auto", // 当只有水平滚动时可以用鼠标滚轮来滚动，如果设为false则不支持水平滚动，如果设为auto支持双轴滚动
scriptpath: "", // 为boxmode图片自定义路径 ("" => same script path)
preventmultitouchscrolling: true // 防止多触点事件引发滚动
});
</script>
</html>
方法三、jquery.slimscroll.js插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.slimScrollRail {
height: auto;
bottom: 10px;
}
.slimScrollDiv {
display: inline-block;
width: 800px !important;
height: 500px !important;
background: gray;
margin: 50px auto;
margin-left: 100px;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.js"></script>
</head>
<body>
<div class="container"></div>
<script>
$('.container').slimScroll({
width: '100%', //可滚动区域宽度
height: '100%', //可滚动区域高度
size: '10px', //滚动条宽度，即组件宽度
color: '#000', //滚动条颜色
position: 'right', //组件位置：left/right
distance: '10px', //组件与侧边之间的距离
// start: 'top', //默认滚动位置：top/bottom
opacity: .4, //滚动条透明度
alwaysVisible: true, //是否 始终显示组件
disableFadeOut: false, //是否 鼠标经过可滚动区域时显示组件，离开时隐藏组件
railVisible: true, //是否 显示轨道
railColor: '#333', //轨道颜色
railOpacity: .2, //轨道透明度
railDraggable: true, //是否 滚动条可拖动
railClass: 'slimScrollRail', //轨道div类名
barClass: 'slimScrollBar', //滚动条div类名
wrapperClass: 'slimScrollDiv', //外包div类名
allowPageScroll: false, //是否 使用滚轮到达顶端/底端时，滚动窗口
// wheelStep: 20, //滚轮滚动量
touchScrollStep: 200, //滚动量当用户使用手势
borderRadius: '7px', //滚动条圆角
railBorderRadius: '7px' //轨道圆角
});
</script>
</body>
</html>
