Browse Source

滚动调修改

zhangxc 5 years ago
parent
commit
391d3817d9
3 changed files with 15 additions and 8 deletions
  1. 3 0
      src/css/roll.css
  2. 6 5
      src/js/console.js
  3. 6 3
      src/js/scrollBar.js

+ 3 - 0
src/css/roll.css

@@ -55,4 +55,7 @@ div,p {margin: 0; padding: 0;}
 }
 .explainPan_scroll_wrap{
 	height: 180px;
+}
+.scroll_wrap .explainPan_scroll_bar{
+	top: 20px;
 }

+ 6 - 5
src/js/console.js

@@ -1688,6 +1688,11 @@ function panDetailB(data){
     $(".explainPan").css({
         marginTop:-($(".explainPan").height()/2-20)+'px'
     })
+    new CusScrollBar({
+        contentSelector: '.explainPan_scroll_cont' , //滚动内容区
+        barSelector: '.explainPan_scroll_bar', //滚动条
+        sliderSelector: '.explainPan_scroll_slider' //滚动滑块
+    });
 }
 //时间获取
 function getTimeDetail(){
@@ -1844,9 +1849,5 @@ $(function() {
         barSelector: '.console_scroll_bar', //滚动条
         sliderSelector: '.console_scroll_slider' //滚动滑块
     });
-    new CusScrollBar({
-        contentSelector: '.explainPan_scroll_cont' , //滚动内容区
-        barSelector: '.explainPan_scroll_bar', //滚动条
-        sliderSelector: '.explainPan_scroll_slider' //滚动滑块
-    });
+    
 });

+ 6 - 3
src/js/scrollBar.js

@@ -1,3 +1,5 @@
+const e = require("express");
+
 /*
 用途项目:自定义滚动条实现
 */
@@ -18,7 +20,7 @@
         contentSelector: '',  //滚动内容区选择器
         barSelector: '',      //滚动条选择器
         sliderSelector: '',   //滚动滑块选择器
-        wheelStep: 100,        //滚动步长(鼠标移动一下,内容滚动的幅度)
+        wheelStep: 10,        //滚动步长(鼠标移动一下,内容滚动的幅度)
       }
       // 覆盖参数
       $.extend(true, self.options, options||{});
@@ -53,7 +55,7 @@
      },
      // 根据内容来定义滑块的高度
      _initSliderHeight: function() {
-       console.log(this.$cont.height(),this.$cont)
+       console.log(this.$cont.height(),this.$cont[0].scrollHeight)
       var rate = this.$cont.height() /this.$cont[0].scrollHeight;
       var sliderHeight = rate*this.$bar.height();
       console.log("rate",rate)
@@ -130,7 +132,8 @@
     // 监听内容的滚动,同步滑块的位置
     _bindContentScroll: function() {
       var self = this;
-      self.$cont.on('scroll', function(){
+      self.$cont.on('scroll', function(e){
+        // e.stopPropagation()
         var sliderEl = self.$slider && self.$slider[0];
         if (sliderEl) {
           // 设置滑块的位置