niceScroll.js 搭配 boostrap 的 modal 組件 js 設定&改變滾動條樣式方法支援多瀏覽器

2020 年 6 月 9 日 發佈留言 
▼css部分可做以下設定

/* 设置滚动条的样式 */
.right_info::-webkit-scrollbar {
 width:12px;
}
/* 滚动槽 */
.right_info::-webkit-scrollbar-track {
 -webkit-box-shadow:inset006pxrgba(255,255,255,1);
 border-radius:10px;
 background:rgba(255,255,255,1);
}
/* 滚动条滑块 */
.right_info::-webkit-scrollbar-thumb {
 border-radius:10px;
 background:rgba(24,65,144) !important;
 -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
}
.right_info::-webkit-scrollbar-thumb:window-inactive {
 background:rgba(255,0,0,0.4);
}
/* 滚动条ie */
.right_info{
  scrollbar-base-color: #ffffff;
  scrollbar-face-color: #144190;
  scrollbar-3dlight-color: #ffffff;
  scrollbar-highlight-color: #ffffff;
  scrollbar-track-color: #ffffff;
  scrollbar-shadow-color: #ffffff;
  scrollbar-dark-shadow-color: #ffffff;
}


▼niceScroll.js可做以下設定

var explorer = window.navigator.userAgent;
    if (explorer.indexOf("MSIE") >= 0) {//ie10及以下


    }else if(explorer.indexOf("Edge") > -1){//Edge
        $(".right_info").niceScroll({
            touchbehavior:true,  //是否是触摸式滚动效果
            cursorcolor: "#144190", // 改变滚动条颜色，使用16进制颜色值
            cursorwidth: "10px", // 滚动条的宽度，单位：便素
            cursorborder: "1px solid rgba(255,255,255,1)", // CSS方式定义滚动条边框
            autohidemode: false,//滚动条是否是自动隐藏，默认值为 true
            background: "rgba(255,255,255,1)", // 轨道的背景颜色
            cursorborderradius: "5px", // 滚动条圆角（像素）
            cursordragontouch: true, // 使用触屏模式来实现拖拽
        });
    }else if (explorer.indexOf("Firefox") >= 0){//Firefox
        $(".right_info").niceScroll({
            touchbehavior:true,  //是否是触摸式滚动效果
            cursorcolor: "#144190", // 改变滚动条颜色，使用16进制颜色值
            cursorwidth: "10px", // 滚动条的宽度，单位：便素
            cursorborder: "1px solid rgba(255,255,255,1)", // CSS方式定义滚动条边框
            autohidemode: false,//滚动条是否是自动隐藏，默认值为 true
            background: "rgba(255,255,255,1)", // 轨道的背景颜色
            cursorborderradius: "5px", // 滚动条圆角（像素）
            cursordragontouch: true, // 使用触屏模式来实现拖拽
        });
    }else if (explorer.indexOf("Chrome") >= 0){//Chrome

    }else if (explorer.indexOf("Opera") >= 0){//Opera

    }else if (explorer.indexOf("Safari") >= 0){//Safari
        $(".right_info").niceScroll({
            touchbehavior:true,  //是否是触摸式滚动效果
            cursorcolor: "#144190", // 改变滚动条颜色，使用16进制颜色值
            cursorwidth: "10px", // 滚动条的宽度，单位：便素
            cursorborder: "1px solid rgba(255,255,255,1)", // CSS方式定义滚动条边框
            autohidemode: false,//滚动条是否是自动隐藏，默认值为 true
            background: "rgba(255,255,255,1)", // 轨道的背景颜色
            cursorborderradius: "5px", // 滚动条圆角（像素）
            cursordragontouch: true, // 使用触屏模式来实现拖拽
        });
    }else if (explorer.indexOf("Trident/7.0") >= 0){//IE11
        // alert('ie11')
    }


    //當點擊按鈕叫出modal時做以下設定，niceScroll上面設定一次，下面也要再設定一次畫面才不會跑掉
    $('.page2_btn2').click(function(){
        // console.log('點擊btn2')
        $('#info2').modal('show');
        $(".modal-body").getNiceScroll().remove();//niceScroll必須先移除否則第二次會跑位

        /*判斷瀏覽器做動作*/
        var explorer = window.navigator.userAgent;
        if (explorer.indexOf("MSIE") >= 0) {//ie10及以下


        }else if(explorer.indexOf("Edge") > -1){//Edge
            setTimeout(function(){//niceScroll必須延遲，否則會跑位
                $(".modal-body").niceScroll({
                    touchbehavior:true,  //是否是触摸式滚动效果
                    cursorcolor: "#ffda2e", // 改变滚动条颜色，使用16进制颜色值
                    cursorwidth: "10px", // 滚动条的宽度，单位：便素
                    cursorborder: "1px solid rgba(24,65,144,0.8)", // CSS方式定义滚动条边框
                    autohidemode: false,//滚动条是否是自动隐藏，默认值为 true
                    background: "rgba(24,65,144,0.8)", // 轨道的背景颜色
                    cursorborderradius: "5px", // 滚动条圆角（像素）
                    cursordragontouch: true, // 使用触屏模式来实现拖拽
                });
            }, 500);
        }else if (explorer.indexOf("Firefox") >= 0){//Firefox
            setTimeout(function(){//niceScroll必須延遲，否則會跑位
                $(".modal-body").niceScroll({
                    touchbehavior:true,  //是否是触摸式滚动效果
                    cursorcolor: "#ffda2e", // 改变滚动条颜色，使用16进制颜色值
                    cursorwidth: "10px", // 滚动条的宽度，单位：便素
                    cursorborder: "1px solid rgba(24,65,144,0.8)", // CSS方式定义滚动条边框
                    autohidemode: false,//滚动条是否是自动隐藏，默认值为 true
                    background: "rgba(24,65,144,0.8)", // 轨道的背景颜色
                    cursorborderradius: "5px", // 滚动条圆角（像素）
                    cursordragontouch: true, // 使用触屏模式来实现拖拽
                });
            }, 500);
        }else if (explorer.indexOf("Chrome") >= 0){//Chrome

        }else if (explorer.indexOf("Opera") >= 0){//Opera

        }else if (explorer.indexOf("Safari") >= 0){//Safari
            setTimeout(function(){//niceScroll必須延遲，否則會跑位
                $(".modal-body").niceScroll({
                    touchbehavior:true,  //是否是触摸式滚动效果
                    cursorcolor: "#ffda2e", // 改变滚动条颜色，使用16进制颜色值
                    cursorwidth: "10px", // 滚动条的宽度，单位：便素
                    cursorborder: "1px solid rgba(24,65,144,0.8)", // CSS方式定义滚动条边框
                    autohidemode: false,//滚动条是否是自动隐藏，默认值为 true
                    background: "rgba(24,65,144,0.8)", // 轨道的背景颜色
                    cursorborderradius: "5px", // 滚动条圆角（像素）
                    // cursordragontouch: true, // 使用触屏模式来实现拖拽
                });
            }, 500);
        }else if (explorer.indexOf("Trident/7.0") >= 0){//IE11
            // alert('ie11')
        }
    });

發表迴響