jQuery的滚动条样式改变
jQuery的滚动条样式改变
效果
代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<link rel="stylesheet" href="jquery.mCustomScrollbar.css">
<style>
.textarea{
width: 400px;
height: 200px;
border: 1px solid black;
overflow: auto;
margin: 200px auto;
}
style>
<script src="jquery-3.4.1.js">script>
<script src="jquery.mCustomScrollbar.concat.min.js">script>
<script>
$(function(){
$(".textarea").mCustomScrollbar();//初始化滚动条
});
script>
head>
<body>
<div class="textarea" data-mcs-theme="dark">//初始化滚动条
abc <br>abc <br>abc <br>abc <br>abc <br>abc
<br>abc <br>abc <br>abc <br>abc <br>abc <br>
abc <br>abc <br>abc <br>abc <br>abc <br>abc
<br>abc <br>abc <br>abc <br>abc <br>abc <br>
div>
body>
html>
步骤：
1.进入http://manos.malihu.gr/jquery-custom-content-scroller/#expand-info
2.找到以下界面
3.进入效果预览界面，查看插件做好的滚动条效果,并且记住你想要设置的滚动条的主题
theme
4.找到第二步的界面点集 download 下载插件
5.查看插件首页的使用说明
导入下载文件包中与上图中相对应的 css 文件和 js 文件。
注意：该插件是基于jQuery的应在导入插件前先导入该插件
6.初始化滚动条的html代码和js代码
html代码中的 dark 为你想要设置滚动条的主题，参考第三步，
7.此时已经可以成功使用滚动条，但是滚动条的样式（宽度，高度等）并不一定适宜
应该改变滚动条的样式
$(".textarea").mCustomScrollbar({
set_width:120, //控制区域的宽度
set_height:200, //控制区域的高度
setTop:"-50px", //y轴滚动条距离顶端的初始位置
setLeft: "-50px",//x轴滚动条据左端的初始位置
axis:"xy" //设置滚动条位于x轴还是y轴或者xy轴都有
});
改变滚动条各个组件的宽高及颜色等
找到下图所在位置
找到你想要改变的组件样式
如：.mCSB_dragger_bar 代表滚动块
.mCSB_button 代表向上或向左按钮
.mCSB_dragger_bar{
width: 50px !important;
background: red !important;
}
分别改变宽度和背景颜色，应设置 !important 增加优先级