自定义滚动条修改

src/css/roll.css

@@ -30,9 +30,9 @@ div,p {margin: 0; padding: 0;}
 	position: absolute;
 	/* top:0; */
 	right:0;
-	width: 5px;
+	width: 8px;
 	height: 100%;
-	background-color: #e4e4e4;
+	/* background-color: #e4e4e4; */
 	z-index: 99;
 }
 /* 滚动块 */
@@ -40,11 +40,11 @@ div,p {margin: 0; padding: 0;}
 	position: absolute;
 	top: 0;
 	left: 0px;
-	width: 5px;
-	height: 48px;
-	background-color: #525252;
+	width: 8px;
+	/* height: 48px; */
+	background-color: #7F7F7F;
 	border-radius:5px;
-	opacity: .5
+	/* opacity: .5 */
 }
 .scroll_wrap .scroll_slider:hover{
 	opacity: 1

src/js/console.js

@@ -1691,7 +1691,8 @@ function panDetailB(data){
     new CusScrollBar({
         contentSelector: '.explainPan_scroll_cont' , //滚动内容区
         barSelector: '.explainPan_scroll_bar', //滚动条
-        sliderSelector: '.explainPan_scroll_slider' //滚动滑块
+        sliderSelector: '.explainPan_scroll_slider', //滚动滑块
+        sliderMode:2   
     });
 }
 //时间获取
@@ -1847,13 +1848,15 @@ $(function() {
     new CusScrollBar({
         contentSelector: '.console_scroll_cont', //滚动内容区
         barSelector: '.console_scroll_bar', //滚动条
-        sliderSelector: '.console_scroll_slider' //滚动滑块
+        sliderSelector: '.console_scroll_slider', //滚动滑块
+        sliderMode:2   
     });
     new CusScrollBar({
         contentSelector: '.console_wrapper_scroll_cont', //滚动内容区
         barSelector: '.console_wrapper_scroll_bar', //滚动条
         sliderSelector: '.console_wrapper_scroll_slider', //滚动滑块
-        scrollDir:'X'
+        scrollDir:'X',
+        sliderMode:2    
     });
     
 });

src/js/scrollBar.js

@@ -21,6 +21,7 @@
         barSelector: '',      //滚动条选择器
         sliderSelector: '',   //滚动滑块选择器
         wheelStep: 10,        //滚动步长（鼠标移动一下，内容滚动的幅度）
+        sliderMode: 1 //1浅色，2深色
       }
       // 覆盖参数
       $.extend(true, self.options, options||{});
@@ -46,6 +47,7 @@
       this.$bar = opts.barSelector ? $(opts.barSelector) : self.$slider.parent();
       //滚动方向
       this.$scrollDir = opts.scrollDir || "Y"
+      this.$sliderMode = opts.sliderMode || 1
       // 获取文档对象
       this.$doc = $(doc);
       // 获取初始化滑块拖动功能
@@ -56,6 +58,7 @@
       this._bindMousewheel();
       // 获取内容来定义滑块的高度
       this._initSliderHeight();
+     
 
      },
      // 根据内容来定义滑块的高度
@@ -76,17 +79,21 @@
         rate = this.$cont.width() /this.$cont[0].scrollWidth;
         this.$bar.css({
           "width": "100%",
-          "height": "5px",
+          "height": "8px",
           "bottom": "0px",
           "zIndex": "100",
         })
         this.$slider.css({
-          "height":"5px"
+          "height":"8px"
         })
         sliderHeight = rate*this.$bar.width();
         this.$slider.css('width',sliderHeight);
       }
-      
+      if(this.$sliderMode === 2){
+        this.$slider.css({
+          "background":"#131F3B"
+        })
+      }
       if(rate === 1){
         this.$bar.css('display','none');
       }