Home Explore Help
Register Sign In
front
/
AIPlatform
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

滚动条修改，未完成

zhangxc 5 years ago
parent
0e0ff08315
commit
072ab95cb8
7 changed files with 412 additions and 159 deletions
Unified View Show Diff Stats
  1. 1 1
      src/css/console.less
  2. 1 1
      src/css/index.less
  3. 58 0
      src/css/roll.css
  4. 172 153
      src/html/console.html
  5. 11 2
      src/js/console.js
  6. 167 0
      src/js/scrollBar.js
  7. 2 2
      webpack.config.js

+ 1 - 1
src/css/console.less
View File 

@@ -1,5 +1,5 @@
 
 @import './reset.less';
 
 @import './reset.less';
 
-
 
+@import './roll.css';
 
 body.console {
 
 body.console {
 
   overflow: auto;
 
   overflow: auto;
 
   overflow-y: hidden;
 
   overflow-y: hidden;

+ 1 - 1
src/css/index.less
View File 

@@ -1,5 +1,5 @@
 
 @import './reset.less';
 
 @import './reset.less';
 
-
 
+@import './roll.css';
 
 .container{
 
 .container{
 
   height: 100%;
 
   height: 100%;
 
 }
 
 }

+ 58 - 0
src/css/roll.css
View File 

@@ -0,0 +1,58 @@
 
+body { margin: 0; padding: 0; font:14px/22px 'Microsoft Yahei'; color: #444; background-color:#eee;}
 
+div,p {margin: 0; padding: 0;}
 
+
 
+/* 滚动内容样式 */
 
+.scroll_main {
 
+	/* width: 550px;
 
+	display: block;
 
+	margin: 40px auto;
 
+	background-color:#fff;
 
+	border:1px solid #9a9a9a; */
 
+}
 
+
 
+/* 滚动内容区样式 */
 
+.scroll_wrap {
 
+	/* width: 100%;
 
+	height: 350px; */
 
+	position: relative;
 
+}
 
+/* 滚动内容样式 */
 
+.scroll_wrap .scroll_cont {
 
+	height: 100%;
 
+	overflow: hidden;
 
+	position: relative;
 
+}
 
+.scroll_wrap .scroll_cont p {
 
+	/* padding:15px; */
 
+}
 
+/* 滚动条 */
 
+.scroll_wrap .scroll_bar {
 
+	position: absolute;
 
+	top:0;
 
+	right:0;
 
+	width: 5px;
 
+	height: 100%;
 
+	background-color: #e4e4e4;
 
+	z-index: 99;
 
+}
 
+/* 滚动块 */
 
+.scroll_wrap .scroll_slider {
 
+	position: absolute;
 
+	top: 0;
 
+	left: 0px;
 
+	width: 5px;
 
+	height: 48px;
 
+	background-color: #525252;
 
+	border-radius:5px;
 
+	opacity: .5
 
+}
 
+.scroll_wrap .scroll_slider:hover{
 
+	opacity: 1
 
+}
 
+
 
+.console_scroll_wrap{
 
+	min-width: 1185px;
 
+}
 
+.explainPan_scroll_wrap{
 
+	height: 180px;
 
+}

+ 172 - 153
src/html/console.html
View File 

@@ -4,6 +4,7 @@
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <title>Document</title>
 
   <title>Document</title>
 
+  <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
 
 </head>
 
 </head>
 
 <body class="console">
 
 <body class="console">
 
   <div class="partTitle">
 
   <div class="partTitle">
 
@@ -25,169 +26,187 @@
 
   </div>
 
   </div>
 
   <div class="partTitleT"></div>
 
   <div class="partTitleT"></div>
 
   <!--<div class="grayLine"></div>-->
 
   <!--<div class="grayLine"></div>-->
 
-  <div class="partWrap clearfix">
 
-      <div class="part01 fl">
 
-        <p class="partTitlePub clearfix" style="cursor: default;">
 
-          <span class="name">出院人数统计</span>
 
-          <span class="personNum">总人数：</span>
 
-        </p>
 
-        <div class="chuyuan">
 
-          <ul class="clearfix" style="cursor: default;">
 
-            <li>
 
-              <p class="numShow died"></p>
 
-              <p class="explainNum">死亡人数</p>
 
-            </li>
 
-            <li class="li02">
 
-              <p class="numShow newborn"></p>
 
-              <p class="explainNum">新生儿患者</p>
 
-            </li>
 
-            <li class="li03">
 
-              <p class="numShow patientNum"></p>
 
-              <p class="explainNum">手术病人数</p>
 
-            </li>
 
-          </ul>
 
-        </div>
 
-        <div class="chuyuanEmpty"></div>
 
-        <div class="defect">
 
-          <p class="partTitlePub">各模块缺陷占比排名 <img class="detailGo" src="../images/details.png" alt=""></p>
 
-          <div class="list">
 
-            <table class="qtable">
 
-  
-            </table>
 
-            <div class="qtableEmpty">
 
-
 
+  <div class="scroll_main  console_scroll_main">
 
+    <div class="scroll_wrap console_scroll_wrap">
 
+      <div class="scroll_bar  console_scroll_bar">
 
+        <div class="scroll_slider console_scroll_slider"></div>
 
+      </div>
 
+      <div class="partWrap clearfix scroll_cont console_scroll_cont">
 
+        
+          <div class="part01 fl">
 
+            <p class="partTitlePub clearfix" style="cursor: default;">
 
+              <span class="name">出院人数统计</span>
 
+              <span class="personNum">总人数：</span>
 
+            </p>
 
+            <div class="chuyuan">
 
+              <ul class="clearfix" style="cursor: default;">
 
+                <li>
 
+                  <p class="numShow died"></p>
 
+                  <p class="explainNum">死亡人数</p>
 
+                </li>
 
+                <li class="li02">
 
+                  <p class="numShow newborn"></p>
 
+                  <p class="explainNum">新生儿患者</p>
 
+                </li>
 
+                <li class="li03">
 
+                  <p class="numShow patientNum"></p>
 
+                  <p class="explainNum">手术病人数</p>
 
+                </li>
 
+              </ul>
 
+            </div>
 
+            <div class="chuyuanEmpty"></div>
 
+            <div class="defect">
 
+              <p class="partTitlePub">各模块缺陷占比排名 <img class="detailGo" src="../images/details.png" alt=""></p>
 
+              <div class="list">
 
+                <table class="qtable">
 
+      
+                </table>
 
+                <div class="qtableEmpty">
 
+    
+                </div>
 
+              </div>
 
             </div>
 
             </div>
 
           </div>
 
           </div>
 
-        </div>
 
-      </div>
 
-      <div class="part02 fl">
 
-        <div class="bldjs">
 
-          <ul class="bingli clearfix">
 
-            <li class="fst">
 
-       -       <p class="numShow"></p>
 
-              <p class="explainNum">累计质控病历数</p>
 
-            </li>
 
-            <li>
 
-              <p class="numShow"></p>
 
-              <p class="explainNum">甲级病历</p>
 
-            </li>
 
-            <li>
 
-              <p class="numShow"></p>
 
-              <p class="explainNum">乙级病历</p>
 
-            </li>
 
-            <li>
 
-              <p class="numShow"></p>
 
-              <p class="explainNum">丙级病历</p>
 
-            </li>
 
-          </ul>
 
-          <div class="bingliLis clearfix">
 
-            <p>病历评分等级占比 <img class="detailGo" src="../images/details.png" alt=""></p>
 
-            <div class="panPartPub panPart02">
 
-              <div class="fen" id="fen01"></div>
 
-              <p>甲级占比</p>
 
+          <div class="part02 fl">
 
+            <div class="bldjs">
 
+              <ul class="bingli clearfix">
 
+                <li class="fst">
 
+          -       <p class="numShow"></p>
 
+                  <p class="explainNum">累计质控病历数</p>
 
+                </li>
 
+                <li>
 
+                  <p class="numShow"></p>
 
+                  <p class="explainNum">甲级病历</p>
 
+                </li>
 
+                <li>
 
+                  <p class="numShow"></p>
 
+                  <p class="explainNum">乙级病历</p>
 
+                </li>
 
+                <li>
 
+                  <p class="numShow"></p>
 
+                  <p class="explainNum">丙级病历</p>
 
+                </li>
 
+              </ul>
 
+              <div class="bingliLis clearfix">
 
+                <p>病历评分等级占比 <img class="detailGo" src="../images/details.png" alt=""></p>
 
+                <div class="panPartPub panPart02">
 
+                  <div class="fen" id="fen01"></div>
 
+                  <p>甲级占比</p>
 
+                </div>
 
+                <div class="panPartPub panPart01">
 
+                  <div class="fen" id="fen02"></div>
 
+                  <p>乙级占比</p>
 
+                </div>
 
+                <div class="panPartPub panPart03">
 
+                  <div class="fen" id="fen03"></div>
 
+                  <p>丙级占比</p>
 
+                </div>
 
+              </div>
 
             </div>
 
             </div>
 
-            <div class="panPartPub panPart01">
 
-              <div class="fen" id="fen02"></div>
 
-              <p>乙级占比</p>
 
+            <div class="pingfendengji">
 
+              <p class="title">病历评分数据</p>
 
+              <div class="pingfendengjiEmpty">
 
+    
+              </div>
 
             </div>
 
             </div>
 
-            <div class="panPartPub panPart03">
 
-              <div class="fen" id="fen03"></div>
 
-              <p>丙级占比</p>
 
+            <div class="pubEchart paymoney">
 
+              <p class="title"><span>各科室病历评分占比</span> <img src="../images/details.png" alt=""></p>
 
+              <div class="toggleSlide">
 
+                <p><span>甲级</span><img src="../images/arrow_down1.png" alt=""> </p>
 
+                <ul>
 
+                  <li class="toggleAverge toggleSlide1" data-str="甲级" data-level="甲" data-type="1">甲级</li>
 
+                  <li class="toggleAverge toggleSlide2" data-str="乙级" data-level="乙" data-type="2">乙级</li>
 
+                  <li class="toggleAverge toggleSlide2" data-str="丙级" data-level="丙" data-type="6">丙级</li>
 
+                </ul>
 
+              </div>
 
+              <div id="barChart" class="barChartPay"></div>
 
+              <div class="barChartPayEmpty"></div>
 
             </div>
 
             </div>
 
+            <!-- <div class="pubEchart paymoney">
 
+              <p class="title"><span>科室平均住院天数柱状图</span> <img src="../images/details.png" alt=""></p>
 
+              <div class="toggleSlide">
 
+                <p><span>平均住院天数</span><img src="../images/arrow_down1.png" alt=""> </p>
 
+                <ul>
 
+                  <li class="toggleAverge toggleSlide1" data-str="平均住院天数" data-type="1">平均住院天数</li>
 
+                  <li class="toggleAverge toggleSlide2" data-str="平均住院花费" data-type="2">平均住院花费</li>
 
+                </ul>
 
+              </div>
 
+              <div id="barChart" class="barChartPay"></div>
 
+              <div class="barChartPayEmpty"></div>
 
+            </div> -->
 
           </div>
 
           </div>
 
-        </div>
 
-        <div class="pingfendengji">
 
-          <p class="title">病历评分数据</p>
 
-          <div class="pingfendengjiEmpty">
 
-
 
-          </div>
 
-        </div>
 
-        <div class="pubEchart paymoney">
 
-          <p class="title"><span>各科室病历评分占比</span> <img src="../images/details.png" alt=""></p>
 
-          <div class="toggleSlide">
 
-            <p><span>甲级</span><img src="../images/arrow_down1.png" alt=""> </p>
 
-            <ul>
 
-              <li class="toggleAverge toggleSlide1" data-str="甲级" data-level="甲" data-type="1">甲级</li>
 
-              <li class="toggleAverge toggleSlide2" data-str="乙级" data-level="乙" data-type="2">乙级</li>
 
-              <li class="toggleAverge toggleSlide2" data-str="丙级" data-level="丙" data-type="6">丙级</li>
 
-            </ul>
 
-          </div>
 
-          <div id="barChart" class="barChartPay"></div>
 
-          <div class="barChartPayEmpty"></div>
 
-        </div>
 
-        <!-- <div class="pubEchart paymoney">
 
-          <p class="title"><span>科室平均住院天数柱状图</span> <img src="../images/details.png" alt=""></p>
 
-          <div class="toggleSlide">
 
-            <p><span>平均住院天数</span><img src="../images/arrow_down1.png" alt=""> </p>
 
-            <ul>
 
-              <li class="toggleAverge toggleSlide1" data-str="平均住院天数" data-type="1">平均住院天数</li>
 
-              <li class="toggleAverge toggleSlide2" data-str="平均住院花费" data-type="2">平均住院花费</li>
 
-            </ul>
 
-          </div>
 
-          <div id="barChart" class="barChartPay"></div>
 
-          <div class="barChartPayEmpty"></div>
 
-        </div> -->
 
-      </div>
 
-      <div class="part03 fl">
 
-        <p class="partTitlePub clearfix">
 
-          <span class="name">病案首页合格率占比</span> <img class="detailGo" src="../images/details.png" alt="">
 
-        </p>
 
-        <div class="toggleSlide">
 
-          <p><span>合格率</span><img src="../images/arrow_down1.png" alt=""> </p>
 
-          <ul>
 
-            <li class="toggleAverge toggleSlide1" data-str="合格率" data-level="合格率" data-type="7">合格率</li>
 
-            <li class="toggleAverge toggleSlide2" data-str="完整率" data-level="完整率" data-type="8">完整率</li>
 
-            <li class="toggleAverge toggleSlide2" data-str="完善率" data-level="完善率" data-type="9">完善率</li>
 
-          </ul>
 
-        </div>
 
-        <div class="barChartLineBox">
 
-          <div id="lineChart" class="barChartLine"></div>
 
-          <div class="barChartLineEmpty"></div>
 
-        </div>
 
-        <div class="circle clearfix">
 
-          <p class="title">单项否决占比 <img class="detailGo" src="../images/details.png" alt=""></p>
 
-          <div class="emptyCircleWrap">
 
-            <div id="emptyCircle" class="emptyCircle"></div>
 
-            <div class="explainPan explainPanT">
 
-              <table>
 
-                
-              </table>
 
+          <div class="part03 fl">
 
+            <p class="partTitlePub clearfix">
 
+              <span class="name">病案首页合格率占比</span> <img class="detailGo" src="../images/details.png" alt="">
 
+            </p>
 
+            <div class="toggleSlide">
 
+              <p><span>合格率</span><img src="../images/arrow_down1.png" alt=""> </p>
 
+              <ul>
 
+                <li class="toggleAverge toggleSlide1" data-str="合格率" data-level="合格率" data-type="7">合格率</li>
 
+                <li class="toggleAverge toggleSlide2" data-str="完整率" data-level="完整率" data-type="8">完整率</li>
 
+                <li class="toggleAverge toggleSlide2" data-str="完善率" data-level="完善率" data-type="9">完善率</li>
 
+              </ul>
 
             </div>
 
             </div>
 
-          </div>
 
-          <div id="emptyCircleWrapEmpty">
 
-
 
-          </div>
 
-        </div>
 
-      </div>
 
-      <p class="clearfix"></p>
 
-      <div class="part04 clearfix">
 
-        <div class="circleB clearfix">
 
-          <p class="title">条目缺陷占比 <img src="../images/details.png" alt=""></p>
 
-          <div class="emptyCircleBData">
 
-            <div id="emptyCircleB" class="emptyCircle"></div>
 
-            <div class="explainPan explainPanB">
 
-              <table>
 
-                
-              </table>
 
+            <div class="barChartLineBox">
 
+              <div id="lineChart" class="barChartLine"></div>
 
+              <div class="barChartLineEmpty"></div>
 
+            </div>
 
+            <div class="circle clearfix">
 
+              <p class="title">单项否决占比 <img class="detailGo" src="../images/details.png" alt=""></p>
 
+              <div class="emptyCircleWrap">
 
+                <div id="emptyCircle" class="emptyCircle"></div>
 
+                <div class="explainPan explainPanT">
 
+                  <table>
 
+                    
+                  </table>
 
+                </div>
 
+              </div>
 
+              <div id="emptyCircleWrapEmpty">
 
+    
+              </div>
 
             </div>
 
             </div>
 
           </div>
 
           </div>
 
-          <div class="emptyCircleBWrap">
 
-
 
-          </div>
 
-        </div>
 
-        <div class="pubEchartB paymoney">
 
-          <p class="title">各科室质控平均分柱状图 <img src="../images/details.png" alt=""></p>
 
-          <div class="toggleSlide innerOuter">
 
-            <p data-str="内科" data-type="3"><span>内科系统</span><img src="../images/arrow_down1.png" alt=""> </p>
 
-            <ul>
 
-              <li class="toggleAverge toggleSlide1" data-str="内科" data-type="3">内科系统</li>
 
-              <li class="toggleAverge toggleSlide2" data-str="外科" data-type="4">外科系统</li>
 
-            </ul>
 
+          <p class="clearfix"></p>
 
+          <div class="part04 clearfix">
 
+            <div class="circleB clearfix">
 
+              <p class="title">条目缺陷占比 <img src="../images/details.png" alt=""></p>
 
+              <div class="emptyCircleBData">
 
+                <div id="emptyCircleB" class="emptyCircle"></div>
 
+                <div class="scroll_main explainPan_scroll_main">
 
+                  <div class="scroll_wrap explainPan_scroll_wrap">
 
+                    <div class="scroll_bar explainPan_scroll_bar">
 
+                      <div class="scroll_slider explainPan_scroll_slider"></div>
 
+                    </div>
 
+                    <div class="explainPan explainPanB scroll_cont explainPan_scroll_cont">
 
+                      <table>
 
+                        
+                      </table>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+               
+              </div>
 
+              <div class="emptyCircleBWrap">
 
+    
+              </div>
 
+            </div>
 
+            <div class="pubEchartB paymoney">
 
+              <p class="title">各科室质控平均分柱状图 <img src="../images/details.png" alt=""></p>
 
+              <div class="toggleSlide innerOuter">
 
+                <p data-str="内科" data-type="3"><span>内科系统</span><img src="../images/arrow_down1.png" alt=""> </p>
 
+                <ul>
 
+                  <li class="toggleAverge toggleSlide1" data-str="内科" data-type="3">内科系统</li>
 
+                  <li class="toggleAverge toggleSlide2" data-str="外科" data-type="4">外科系统</li>
 
+                </ul>
 
+              </div>
 
+              <div id="barChartPay" class="barChartPay" style="height: 217px;"></div>
 
+              <div class="barChartPayEmptys" style="height: 217px;"></div>
 
+            </div>
 
           </div>
 
           </div>
 
-          <div id="barChartPay" class="barChartPay" style="height: 217px;"></div>
 
-          <div class="barChartPayEmptys" style="height: 217px;"></div>
 
-        </div>
 
-      </div>
 
+         
+      </div>                      
+    </div>
 
   </div>
 
   </div>
 
+  
 </body>
 
 </body>
 
 </html>
 
 </html>

+ 11 - 2
src/js/console.js
View File 

@@ -5,6 +5,7 @@ require("../css/console.less")
 
 require("../images/logo.png")
 
 require("../images/logo.png")
 
 require("../images/arrow_down.png")
 
 require("../images/arrow_down.png")
 
 require('./modal.js');
 
 require('./modal.js');
 
+require('./scrollBar.js')
 
 
 
 // import 'zrender/lib/svg/svg';
 
 // import 'zrender/lib/svg/svg';
 
 const {api} = require('./api.js')
 
 const {api} = require('./api.js')
 
@@ -412,7 +413,6 @@ function getBarData(type){
 
     //         }
 
     //         }
 
     //     })
 
     //     })
 
     // }
 
     // }
 
-    console.log(behosDateStart,45455555555555)
 
     if(hasData('FUNC000049')){
 
     if(hasData('FUNC000049')){
 
         post(api.leaveHosCount,{//出院人数统计
 
         post(api.leaveHosCount,{//出院人数统计
 
             "type": type||1,//1月2年
 
             "type": type||1,//1月2年
 
@@ -1791,7 +1791,6 @@ function getStaticDate(flg){
 
     getHomeData('firstLevelPercent')
 
     getHomeData('firstLevelPercent')
 
     getAverageScoreLis()
 
     getAverageScoreLis()
 
     getEveryDeptLevel()
 
     getEveryDeptLevel()
 
-    console.log(behosDateStart,behosDateEnd,898989898)
 
     return true
 
     return true
 
 }
 
 }
 
 $(function() {
 
 $(function() {
 
@@ -1840,4 +1839,14 @@ $(function() {
 
     $('.iconCalen').on("click", function(e){
 
     $('.iconCalen').on("click", function(e){
 
         $(this).parent().find("input").focus()
 
         $(this).parent().find("input").focus()
 
     })
 
     })
 
+    new CusScrollBar({
 
+        contentSelector: '.console_scroll_cont', //滚动内容区
 
+        barSelector: '.console_scroll_bar', //滚动条
 
+        sliderSelector: '.console_scroll_slider' //滚动滑块
 
+    });
 
+    new CusScrollBar({
 
+        contentSelector: '.explainPan_scroll_cont' , //滚动内容区
 
+        barSelector: '.explainPan_scroll_bar', //滚动条
 
+        sliderSelector: '.explainPan_scroll_slider' //滚动滑块
 
+    });
 
 });
 
 });

+ 167 - 0
src/js/scrollBar.js
View File 

@@ -0,0 +1,167 @@
 
+/*
 
+用途项目：自定义滚动条实现
 
+*/
 
+(function(win, doc, $){
 
+  // 定义的滚动条的构造函数
 
+  function CusScrollBar(options) {
 
+    // 函数的调用
 
+    this._init(options);
 
+  }
 
+  // 对象的合并
 
+  $.extend(CusScrollBar.prototype, {
 
+    _init: function(options){
 
+      // 闭包
 
+      var self = this;
 
+      // 初始化参数
 
+      self.options = {
 
+        scrollDir: 'Y',       //滚动的方向
 
+        contentSelector: '',  //滚动内容区选择器
 
+        barSelector: '',      //滚动条选择器
 
+        sliderSelector: '',   //滚动滑块选择器
 
+        wheelStep: 100,        //滚动步长（鼠标移动一下，内容滚动的幅度）
 
+      }
 
+      // 覆盖参数
 
+      $.extend(true, self.options, options||{});
 
+      self._initDomEvent();
 
+      return self;
 
+    },
 
+
 
+    /**
 
+     * 初始化DOM引用
 
+     * @method _initDomEvent
 
+     * @return {CusScrollBar}
 
+     */
 
+     _initDomEvent: function() {
 
+      var opts = this.options;
 
+      // 滚动内容区对象，必填项
 
+      this.$cont = $(opts.contentSelector);
 
+      // 滚动条滑块对象，必须项
 
+      this.$slider = $(opts.sliderSelector);
 
+      // 滚动条对象
 
+      this.$bar = opts.barSelector ? $(opts.barSelector) : self.$slider.parent();
 
+      // 获取文档对象
 
+      this.$doc = $(doc);
 
+      // 获取初始化滑块拖动功能
 
+      this._initSliderDragEvent();
 
+      // 获取同步滑块的位置
 
+      this._bindContentScroll();
 
+      // 获取鼠标滚轮事件
 
+      this._bindMousewheel();
 
+      // 获取内容来定义滑块的高度
 
+      this._initSliderHeight();
 
+
 
+     },
 
+     // 根据内容来定义滑块的高度
 
+     _initSliderHeight: function() {
 
+       console.log(this.$cont.height(),this.$cont)
 
+      var rate = this.$cont.height() /this.$cont[0].scrollHeight;
 
+      var sliderHeight = rate*this.$bar.height();
 
+      console.log("rate",rate)
 
+      if(rate === 1){
 
+        this.$bar.css('display','none');
 
+      }
 
+      this.$slider.css('height',sliderHeight);
 
+     },
 
+     
+
 
+     /**
 
+      * 初始化滑块拖动功能
 
+      * @return {[Object]} [this]
 
+      */
 
+    _initSliderDragEvent: function() {
 
+      var self = this;
 
+      // 滑块元素
 
+      var slider = this.$slider,
 
+          sliderEl = slider[0];
 
+      // 如果元素存在
 
+      if (sliderEl) {
 
+        var doc = this.$doc,
 
+            dragStartPagePostion,
 
+            dragStartScrollPostion,
 
+            dragContBarRate;
 
+        function mousemoveHandler(e) {
 
+          e.preventDefault();
 
+          if (dragStartPagePostion == null) {
 
+            return;
 
+          }
 
+          //内容开始卷曲的高度+rate*(鼠标释放的位置-开始的位置) == 就是内容滑动的位置
 
+          self.scrollTo(dragStartScrollPostion + (e.pageY - dragStartPagePostion)*dragContBarRate);
 
+        }
 
+        slider.on('mousedown', function(e){
 
+          e.preventDefault();
 
+          // 获取鼠标的点击的开始位置
 
+          dragStartPagePostion = e.pageY;
 
+          // 获取内容区域的向上卷区的高度
 
+          dragStartScrollPostion = self.$cont[0].scrollTop;
 
+          dragContBarRate = self.getMaxScrollPosition()/self.getMaxSliderPosition();
 
+          // 监听的document对象
 
+          doc.on('mousemove.scroll', mousemoveHandler).on('mouseup.scroll',function(){
 
+            doc.off('.scroll');
 
+          });
 
+        });
 
+        return self;
 
+      }
 
+    },
 
+    
+    // 计算滑块的当前位置
 
+    getSliderPosition: function() {
 
+      var self = this,
 
+      // 滑块可以移动的距离
 
+          maxSliderPosition = self.getMaxSliderPosition();
 
+          // 滑块移动的距离
 
+      return Math.min(maxSliderPosition, maxSliderPosition*self.$cont[0].scrollTop/self.getMaxScrollPosition());
 
+    },
 
+
 
+    // 内容可滚动的高度
 
+    getMaxScrollPosition: function() {
 
+      var self = this;
 
+      return Math.max(self.$cont.height(), self.$cont[0].scrollHeight) - self.$cont.height();
 
+    
+    },
 
+
 
+    //滑块可移动的距离
 
+    getMaxSliderPosition: function(){
 
+      var self = this;
 
+      const paddingTop = parseInt(self.$cont.css("paddingTop"))
 
+      const paddingBottom = parseInt(self.$cont.css("paddingBottom"))
 
+      return self.$bar.height()+paddingTop*2+paddingBottom*2 + - self.$slider.height();
 
+    },
 
+
 
+    // 监听内容的滚动，同步滑块的位置
 
+    _bindContentScroll: function() {
 
+      var self = this;
 
+      self.$cont.on('scroll', function(){
 
+        var sliderEl = self.$slider && self.$slider[0];
 
+        if (sliderEl) {
 
+          // 设置滑块的位置
 
+          sliderEl.style.top = self.getSliderPosition() + 'px';
 
+        }
 
+      });
 
+      return self;
 
+    },
 
+
 
+    // 鼠标滚轮事件
 
+    _bindMousewheel: function() {
 
+      var self = this;
 
+      // on监听事件，多个事件利用空格分开
 
+      self.$cont.on('mousewheel DOMMouseScroll',function(e){
 
+        e.preventDefault();
 
+        // 判断原生事件对象的属性
 
+        var oEv = e.originalEvent,
 
+        //原生事件对象,（其他浏览器负数向下，firefox正数向下,所以在wheelDelta前面有负数）
 
+        // 想要达到的效果，鼠标向下滚动，内容向下走
 
+            wheelRange = oEv.wheelDelta ? -oEv.wheelDelta/120 : (oEv.detail || 0)/3;
 
+            // 调用scrollTo方法。
 
+            self.scrollTo(self.$cont[0].scrollTop + wheelRange*self.options.wheelStep)
 
+      });
 
+    },
 
+
 
+    // 内容的滑动
 
+    scrollTo: function(positonVal) {
 
+      var self = this;
 
+      self.$cont.scrollTop(positonVal);
 
+    }
 
+  });
 
+
 
+  win.CusScrollBar = CusScrollBar;
 
+})(window,document,jQuery)

+ 2 - 2
webpack.config.js
View File 

@@ -62,7 +62,7 @@ module.exports = {
 
       title: 'index',
 
       title: 'index',
 
       template: path.resolve(__dirname, 'src/html', 'index.html'),
 
       template: path.resolve(__dirname, 'src/html', 'index.html'),
 
       filename: 'index.html',
 
       filename: 'index.html',
 
-      chunks: ['index', 'vendor', 'common'],
 
+      chunks: ['index', 'vendor', 'common','scrollBar'],
 
       hash: true, //防止缓存
 
       hash: true, //防止缓存
 
       inject: true,
 
       inject: true,
 
       minify: {
 
       minify: {
 
@@ -75,7 +75,7 @@ module.exports = {
 
       title: 'console.html',
 
       title: 'console.html',
 
       template: path.resolve(__dirname, 'src/html', 'console.html'),
 
       template: path.resolve(__dirname, 'src/html', 'console.html'),
 
       filename: 'console.html',
 
       filename: 'console.html',
 
-      chunks: ['console', 'vendor', 'common'],
 
+      chunks: ['console', 'vendor', 'common','scrollBar'],
 
       hash: true, //防止缓存
 
       hash: true, //防止缓存
 
       inject: true,
 
       inject: true,
 
       minify: {
 
       minify: {