jQuery的滚动条样式改变

jQuery的滚动条样式改变

效果

jQuery的滚动条样式改变_第1张图片

代码


<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.找到以下界面jQuery的滚动条样式改变_第2张图片
3.进入效果预览界面,查看插件做好的滚动条效果,并且记住你想要设置的滚动条的主题
theme
jQuery的滚动条样式改变_第3张图片
4.找到第二步的界面点集 download 下载插件
5.查看插件首页的使用说明
jQuery的滚动条样式改变_第4张图片
导入下载文件包中与上图中相对应的 css 文件和 js 文件。
注意:该插件是基于jQuery的应在导入插件前先导入该插件
6.初始化滚动条的html代码和js代码
jQuery的滚动条样式改变_第5张图片
html代码中的 dark 为你想要设置滚动条的主题,参考第三步,
7.此时已经可以成功使用滚动条,但是滚动条的样式(宽度,高度等)并不一定适宜
应该改变滚动条的样式
jQuery的滚动条样式改变_第6张图片

  $(".textarea").mCustomScrollbar({
                set_width:120,  //控制区域的宽度
                set_height:200, //控制区域的高度
                setTop:"-50px", //y轴滚动条距离顶端的初始位置
                setLeft: "-50px",//x轴滚动条据左端的初始位置
                axis:"xy"      //设置滚动条位于x轴还是y轴或者xy轴都有
            });

改变滚动条各个组件的宽高及颜色等
找到下图所在位置
jQuery的滚动条样式改变_第7张图片
找到你想要改变的组件样式
如:.mCSB_dragger_bar 代表滚动块
.mCSB_button 代表向上或向左按钮

        .mCSB_dragger_bar{
           width: 50px !important;
           background: red !important;
       }

分别改变宽度和背景颜色,应设置 !important 增加优先级

你可能感兴趣的:(jQuery,滚动条,jQuery,custom,content,scroller)