滚动条样式处理

 方法一、只在谷歌有效

<!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>

 

posted @ 2021-10-12 17:32  蓝色精灵jah  阅读(351)  评论(0)  编辑  收藏  举报