Startsida Utforska Hjälp
Registrera dig Logga in
front
/
AIPlatform
2
0
Fork 0
Filer Ärenden 0 Pull-förfrågningar 0 Wiki
Bläddra i källkod

自定义滚动条

zhangxc 5 år sedan
förälder
09bee41dd7
incheckning
3f6e170164
5 ändrade filer med 313 tillägg och 231 borttagningar
Delad Vy Visa Diff Statistik
  1. 1 1
      src/css/console.less
  2. 1 1
      src/css/roll.css
  3. 203 190
      src/html/console.html
  4. 6 0
      src/js/console.js
  5. 102 39
      src/js/scrollBar.js

+ 1 - 1
src/css/console.less
Visa fil 

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

+ 1 - 1
src/css/roll.css
Visa fil 

@@ -28,7 +28,7 @@ div,p {margin: 0; padding: 0;}
 
 /* 滚动条 */
 
 .scroll_wrap .scroll_bar {
 
 	position: absolute;
 
-	top:0;
 
+	/* top:0; */
 
 	right:0;
 
 	width: 5px;
 
 	height: 100%;

+ 203 - 190
src/html/console.html
Visa fil 

@@ -6,207 +6,220 @@
 
   <title>Document</title>
 
   <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
 
 </head>
 
-<body class="console">
 
-  <div class="partTitle">
 
-    <p><span></span>质控科数据概览</p>
 
-    <div class="monthYear clearfix">
 
-      <span class="mon">本月</span>
 
-      <span class="year">本年</span>
 
-    </div>
 
-    <div class="dateDetail fr">
 
-      
-    </div>
 
-    <span class="dataSelectDark filterItem typeFilter clearfix">
 
-        <!-- <span class="fl">出院日期：</span> -->
 
-        <span class="datapickerBox fl"><input type="text" placeholder="请选择时间" id="datepicker" autocomplete="off" readonly/><img class="iconCalen" src="../images/icon_calen_grey.png" /></span>
 
-        <span class="divide fl">-</span>
 
-        <span class="datapickerBox fl"><input type="text" placeholder="请选择时间" id="datepicker2"  autocomplete="off" readonly/><img class="iconCalen" src="../images/icon_calen_grey.png" /></span>
 
-        <span class="sureDate">查询</span>
 
-    </span>
 
-  </div>
 
-  <div class="partTitleT"></div>
 
-  <!--<div class="grayLine"></div>-->
 
-  <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>
 
+<body >
 
+  <div class="scroll_main  console_wrapper_scroll_main">
 
+    <div class="scroll_wrap console_wrapper_scroll_wrap">
 
+        <div class="scroll_bar  console_wrapper_scroll_bar">
 
+          <div class="scroll_slider  console_wrapper_scroll_slider"></div>
 
+        </div>
 
+        <div class="console scroll_cont console_wrapper_scroll_cont">
 
+          <div class="partTitle">
 
+            <p><span></span>质控科数据概览</p>
 
+            <div class="monthYear clearfix">
 
+              <span class="mon">本月</span>
 
+              <span class="year">本年</span>
 
             </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 class="dateDetail fr">
 
+              
             </div>
 
+            <span class="dataSelectDark filterItem typeFilter clearfix">
 
+                <!-- <span class="fl">出院日期：</span> -->
 
+                <span class="datapickerBox fl"><input type="text" placeholder="请选择时间" id="datepicker" autocomplete="off" readonly/><img class="iconCalen" src="../images/icon_calen_grey.png" /></span>
 
+                <span class="divide fl">-</span>
 
+                <span class="datapickerBox fl"><input type="text" placeholder="请选择时间" id="datepicker2"  autocomplete="off" readonly/><img class="iconCalen" src="../images/icon_calen_grey.png" /></span>
 
+                <span class="sureDate">查询</span>
 
+            </span>
 
           </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>
 
-                <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 class="partTitleT"></div>
 
+          <!--<div class="grayLine"></div>-->
 
+          <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>
 
-            <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>
 
-              </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="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 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="explainPan explainPanB scroll_cont explainPan_scroll_cont">
 
-                      <table>
 
-                        
-                      </table>
 
+                    <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 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 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 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>
 
+                      </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="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>
 
           </div>
 
-         
-      </div>                      
+
 
+
 
+
 
+        </div>
 
     </div>
 
   </div>
 
   
+  
 </body>
 
 </html>

+ 6 - 0
src/js/console.js
Visa fil 

@@ -1849,5 +1849,11 @@ $(function() {
 
         barSelector: '.console_scroll_bar', //滚动条
 
         sliderSelector: '.console_scroll_slider' //滚动滑块
 
     });
 
+    new CusScrollBar({
 
+        contentSelector: '.console_wrapper_scroll_cont', //滚动内容区
 
+        barSelector: '.console_wrapper_scroll_bar', //滚动条
 
+        sliderSelector: '.console_wrapper_scroll_slider', //滚动滑块
 
+        scrollDir:'X'
 
+    });
 
     
 });

+ 102 - 39
src/js/scrollBar.js
Visa fil 

@@ -4,25 +4,6 @@
 
 */
 
  
 (function(win, doc, $){
 
-  $.fn.extend({  
-    "preventScroll":function(){  
-        $(this).each(function(){  
-            var _this = this;  
-            if(navigator.userAgent.indexOf('Firefox') >= 0){   //firefox  
-                _this.addEventListener('DOMMouseScroll',function(e){  
-                    _this.scrollTop += e.detail > 0 ? 60 : -60;     
-                    e.preventDefault();  
-                },false);   
-            }else{  
-                _this.onmousewheel = function(e){     
-                    e = e || window.event;     
-                    _this.scrollTop += e.wheelDelta > 0 ? -60 : 60;     
-                    return false;  
-                };  
-            }  
-        })    
-    }  
-  });
 
   // 定义的滚动条的构造函数
 
   function CusScrollBar(options) {
 
     // 函数的调用
 
@@ -60,6 +41,8 @@
 
       this.$slider = $(opts.sliderSelector);
 
       // 滚动条对象
 
       this.$bar = opts.barSelector ? $(opts.barSelector) : self.$slider.parent();
 
+      //滚动方向
 
+      this.$scrollDir = opts.scrollDir || "Y"
 
       // 获取文档对象
 
       this.$doc = $(doc);
 
       // 获取初始化滑块拖动功能
 
@@ -74,14 +57,33 @@
 
      },
 
      // 根据内容来定义滑块的高度
 
      _initSliderHeight: function() {
 
-       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)
 
+      var rate;
 
+      var sliderHeight;
 
+      if(this.$scrollDir == "Y"){
 
+        rate = this.$cont.height() /this.$cont[0].scrollHeight;
 
+        this.$bar.css({
 
+          "top": "0px"
 
+        })
 
+        sliderHeight = rate*this.$bar.height();
 
+        this.$slider.css('height',sliderHeight);
 
+      }else{
 
+        rate = this.$cont.width() /this.$cont[0].scrollWidth;
 
+        this.$bar.css({
 
+          "width": "100%",
 
+          "height": "5px",
 
+          "bottom": "0px",
 
+        })
 
+        this.$slider.css({
 
+          "height":"5px"
 
+        })
 
+        sliderHeight = rate*this.$bar.width();
 
+        this.$slider.css('width',sliderHeight);
 
+      }
 
+      
       if(rate === 1){
 
         this.$bar.css('display','none');
 
       }
 
-      this.$slider.css('height',sliderHeight);
 
+      // this.$slider.css('height',sliderHeight);
 
      },
 
      
 
@@ -106,20 +108,54 @@
 
             return;
 
           }
 
           //内容开始卷曲的高度+rate*(鼠标释放的位置-开始的位置) == 就是内容滑动的位置
 
-          self.scrollTo(dragStartScrollPostion + (e.pageY - dragStartPagePostion)*dragContBarRate);
 
+          if(self.$scrollDir == "Y"){
 
+            self.scrollTo(dragStartScrollPostion + (e.pageY - dragStartPagePostion)*dragContBarRate);
 
+          }else{
 
+            self.scrollTo(dragStartScrollPostion + (e.pageX - dragStartPagePostion)*dragContBarRate);
 
+          }
 
+          
         }
 
         slider.on('mousedown', function(e){
 
           e.preventDefault();
 
-          // 获取鼠标的点击的开始位置
 
-          dragStartPagePostion = e.pageY;
 
-          // 获取内容区域的向上卷区的高度
 
-          dragStartScrollPostion = self.$cont[0].scrollTop;
 
-          dragContBarRate = self.getMaxScrollPosition()/self.getMaxSliderPosition();
 
+          e.stopPropagation()
 
+          if(self.$scrollDir == "Y"){
 
+              // 获取鼠标的点击的开始位置
 
+            dragStartPagePostion = e.pageY;
 
+            // 获取内容区域的向上卷区的高度
 
+            dragStartScrollPostion = self.$cont[0].scrollTop;
 
+            dragContBarRate = self.getMaxScrollPosition()/self.getMaxSliderPosition();
 
+          }else{
 
+             // 获取鼠标的点击的开始位置
 
+            dragStartPagePostion = e.pageX;
 
+            // 获取内容区域的向上卷区的高度
 
+            dragStartScrollPostion = self.$cont[0].scrollLeft;
 
+            dragContBarRate = self.getMaxScrollPosition()/self.getMaxSliderPosition();
 
+          }
 
+         
           // 监听的document对象
 
           doc.on('mousemove.scroll', mousemoveHandler).on('mouseup.scroll',function(){
 
             doc.off('.scroll');
 
           });
 
         });
 
+        this.$bar.on("click",function(e){
 
+          var scrollHei 
+          dragContBarRate = self.getMaxScrollPosition()/self.getMaxSliderPosition();
 
+          if(self.$scrollDir == "Y"){
 
+            if(e.offsetY > slider.height()){
 
+              self.scrollTo((e.offsetY - slider.height())*dragContBarRate);
 
+            }else{
 
+              self.scrollTo(e.offsetY*dragContBarRate);
 
+            }
 
+           
+          }else{
 
+            if(e.offsetX > slider.width()){
 
+              self.scrollTo((e.offsetX - slider.width())*dragContBarRate);
 
+            }else{
 
+              self.scrollTo(e.offsetX*dragContBarRate);
 
+            }
 
+          }
 
+          // dragStartScrollPostion = self.$cont[0].scrollTop;
 
+        })
 
         return self;
 
       }
 
     },
 
@@ -128,15 +164,27 @@
 
     getSliderPosition: function() {
 
       var self = this,
 
       // 滑块可以移动的距离
 
-          maxSliderPosition = self.getMaxSliderPosition();
 
-          // 滑块移动的距离
 
-      return Math.min(maxSliderPosition, maxSliderPosition*self.$cont[0].scrollTop/self.getMaxScrollPosition());
 
+      maxSliderPosition = self.getMaxSliderPosition();
 
+      // 滑块移动的距离
 
+      var sliderPosition;
 
+      if(self.$scrollDir == "Y"){
 
+        sliderPosition =  Math.min(maxSliderPosition, maxSliderPosition*self.$cont[0].scrollTop/self.getMaxScrollPosition());
 
+      }else{
 
+        sliderPosition =  Math.min(maxSliderPosition, maxSliderPosition*self.$cont[0].scrollLeft/self.getMaxScrollPosition());
 
+      }
 
+      return sliderPosition;
 
     },
 
 
     // 内容可滚动的高度
 
     getMaxScrollPosition: function() {
 
       var self = this;
 
-      return Math.max(self.$cont.height(), self.$cont[0].scrollHeight) - self.$cont.height();
 
+      var maxScrollPosition;
 
+      if(self.$scrollDir == "Y"){
 
+        maxScrollPosition = Math.max(self.$cont.height(), self.$cont[0].scrollHeight) - self.$cont.height();
 
+      }else{
 
+        maxScrollPosition = Math.max(self.$cont.width(), self.$cont[0].scrollWidth) - self.$cont.width();
 
+      }
 
+      return maxScrollPosition
 
     
     },
 
 
@@ -145,18 +193,29 @@
 
       var self = this;
 
       const paddingTop = parseInt(self.$cont.css("paddingTop"))
 
       const paddingBottom = parseInt(self.$cont.css("paddingBottom"))
 
-      return self.$bar.height()+paddingTop*3+paddingBottom*3 + - self.$slider.height();
 
+      const paddingLeft = parseInt(self.$cont.css("paddingLeft"))
 
+      const paddingRight = parseInt(self.$cont.css("paddingRight"))
 
+      if(self.$scrollDir == "Y"){
 
+        return self.$bar.height()+paddingTop*3+paddingBottom*3 + - self.$slider.height();
 
+      }else{
 
+        return self.$bar.width()+paddingLeft*3+paddingRight*3 + - self.$slider.width();
 
+      }
 
+     
     },
 
 
     // 监听内容的滚动，同步滑块的位置
 
     _bindContentScroll: function() {
 
       var self = this;
 
       self.$cont.on('scroll', function(){
 
-        self.$cont.preventScroll()
 
         var sliderEl = self.$slider && self.$slider[0];
 
         if (sliderEl) {
 
           // 设置滑块的位置
 
-          sliderEl.style.top = self.getSliderPosition() + 'px';
 
+          if(self.$scrollDir == "Y"){
 
+            sliderEl.style.top = self.getSliderPosition() + 'px';
 
+          }else{
 
+            sliderEl.style.left = self.getSliderPosition() + 'px';
 
+          }
 
+         
         }
 
       });
 
       return self;
 
@@ -175,7 +234,6 @@
 
             wheelRange = oEv.wheelDelta ? -oEv.wheelDelta/120 : (oEv.detail || 0)/3;
 
             // 调用scrollTo方法。
 
             self.scrollTo(self.$cont[0].scrollTop + wheelRange*self.options.wheelStep)
 
-            console.log()
 
             if(self.$cont[0].scrollTop !==0 ){
 
               e.stopPropagation()
 
             }
 
@@ -186,7 +244,12 @@
 
     // 内容的滑动
 
     scrollTo: function(positonVal) {
 
       var self = this;
 
-      self.$cont.scrollTop(positonVal);
 
+      if(self.$scrollDir =="Y"){
 
+        self.$cont.scrollTop(positonVal);
 
+      }else{
 
+        self.$cont.scrollLeft(positonVal);
 
+      }
 
+     
     }
 
   });