javascript自定義滾動條實現(xiàn)代碼

更新時間：2020年04月20日 11:27:53 作者：帶上餅干

這篇文章主要為大家詳細介紹了javascript自定義滾動條實現(xiàn)代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在工作中經(jīng)常會遇到內(nèi)容會超出固定的一個范圍，超出的內(nèi)容一般會使用到滾動條來滾動顯示。

但是用瀏覽器默認的滾動條經(jīng)常被產(chǎn)品經(jīng)理鄙視，可是用css卻改變不了滾動條的樣式，還好，有萬能的js ^_^~~

網(wǎng)上有各種各樣的插件，但最順手的還是自己寫的，還可以一邊擼一邊當學(xué)習(xí)，自己動手豐衣足食 (*^__^*)

其中這三個問題深深地困擾我：

1、滾動條高度
2、每次點擊向上、向下按鈕的時候滾動條應(yīng)該移動多少距離
3、每拖動1px滾動條，頁面需要移動多少？

整個的框架大概是長這樣的：

先來看看第一個問題。

　　由于目前已經(jīng)知道內(nèi)容區(qū)域的高度和內(nèi)容可視高度以及滾動條可滾動區(qū)域的高度了，由于內(nèi)容區(qū)域與滾動條每次移動的距離都是成正比的，所以第一個問題很好解決：

　　滾動條可移動范圍 / 滾動條高度 = 內(nèi)容高度 / 內(nèi)容可視高度

每次點擊按鈕的時候滾動條應(yīng)該移動多少距離？

　　這里我是給參數(shù)distance設(shè)置一個值來決定每次點按鈕的時候，內(nèi)容區(qū)域應(yīng)該滾動多少的距離。改變這個值可以改變內(nèi)容區(qū)域滾動的快慢，如果有更好的處理方法和建議記得告訴我喔~

目前，內(nèi)容區(qū)域每次滾動的距離是知道了，剩下的是計算滾動條相對于應(yīng)該移動多少距離？

　　滾動條可移動范圍 /滾動條每次移動距離 = 內(nèi)容區(qū)域高度 / 內(nèi)容區(qū)域每次移動多少距離

效果如下：

這里還有一個問題，就是同時還得區(qū)分是單次點擊還是長按。

所以得判斷一下從按下按鈕到松開時候的時長，目前設(shè)置為<100ms為單次點擊，否則為長按：

拖動滾動條的時候，每移動1px滾動條，內(nèi)容區(qū)域需要移動多少？

　　先知道每1PX的距離占滾動條可移動范圍的百分之幾，再用內(nèi)容區(qū)域高度除以所得的這個百分比，就得出滾動條每移動1px內(nèi)容區(qū)域相對滾動多少距離了。

　　內(nèi)容區(qū)域滾動的距離 = 內(nèi)容區(qū)域高度 / (滾動條滾動區(qū)域 / 1)

demo完整代碼如下：

注意：因為用的是seajs寫的，所以稍微留意下文件的加載情況啦

css：

.wapper{scrollbar-3dlight-color:#000; position:relative; height:302px;width:300px;overflow:hidden;margin:0 auto;line-height:40px;text-align:center;}
 .area{background-color:#E2E2EF;width:100%; position:absolute;top:0px;left:0px;}
 .bar{position:absolute;top:0px;right:0px; height:100%;width:1rem;background-color:#ccc;}
 .scroll,.middle,.forward,.backward{display:block;cursor:pointer;position:absolute;right:0px;width:100%;}
 .forward,.backward{height:16px;background-color:#6868B1;}
 .middle{background-color:rgba(255, 255, 255, 0.22);top:16px;cursor:auto;}
 .scroll{position:absolute;top:0px;background-color:#C2C2E9;}
 .forward{top:0px;}
 .backward{bottom:0px;}

html：

<div class="wapper">
 <div class="area">
 <p>1、this is content</p>
 <p>2、this is content</p>
 <p>3、this is content</p>
 <p>4、this is content</p>
 <p>5、this is content</p>
 <p>6、this is content</p>
 <p>7、this is content</p>
 <p>8、this is content</p>
 <p>9、this is content</p>
 <p>10、this is content</p>
 <p>11、this is content</p>
 </div>
 <div class="bar">
 <span class="forward"></span>
 <span class="middle"><em class="scroll"></em></span>
 <span class="backward"></span>
 </div>
</div>

<script type="text/javascript" src="../../lib/seajs/sea.js"></script>
<script type="text/javascript" src="../../lib/base/1.0.x/base.js"></script>
<script type="text/javascript">
seajs.use(['lib/jquery/1.11.x/index.js', '_example/simulationScroll/simulationScroll.js'], function($, scroll) {
 scroll.init({
 wapper: $('.wapper'), 
 distance: 10,
 });
});

js：

define(function(require, exports, module) {

 'use strict';

 var $ = require('lib/jquery/1.11.x/index.js');

 var parameter = null;

 //檢測設(shè)備類型
 var startWhen, endWhen, moveWhen;
 var u = navigator.userAgent; 

 if ( u.match(/\b(Windows\sNT|Macintosh)\b/) ) {
 // 鼠標
 startWhen = 'mousedown';
 endWhen = 'mouseup';
 moveWhen = 'mousemove';
 } else {
 // 觸摸屏
 startWhen = 'touchstart';
 endWhen = 'touchend';
 moveWhen = 'touchmove';
 }

 var simulation = {

 _mousedownTimer: 0,
 _setintervalId: 0,
 _longClick: false, //是否長點擊
 _turnOf: null, //滾動方向

 init: function(options) {

  var t = this;

  t._scroll = $('.scroll'); //滾動條

  t._wapper = options.wapper.find('.area'); //內(nèi)容區(qū)域
  t._distance = options.distance; //點擊上下按鈕頁面每次滾動的距離

  var forward = $('.forward'),
  middle = $('.middle'),
  backward = $('.backward');

  parameter = {
  view: t._wapper.parent().innerHeight(), //視圖高度
  page: t._wapper.height(), //內(nèi)容高度
  barArea: 0, //滾動條可移動范圍
  scrollHeight: 0, //滾動條的高度
  scrollDistance: 0 //滾動條每次滾動的距離
  };

  //初始化滾動條
  if (parameter.page > parameter.view) {

  //滾動條可移動范圍
  middle.height( parameter.view - forward.height() * 2);

  parameter.barArea = middle.height();

  //滾動條高度 = 滾動條可滾動范圍 / （頁面高度 / 可視高度）的百分比
  parameter.scrollHeight = parameter.barArea / (parameter.page / parameter.view) ;
  t._scroll.height(parameter.scrollHeight);

  //滾動條每次滾動的距離 = 滾動條可移動范圍 * 頁面每次滾動的百分比
  parameter.scrollDistance = parameter.barArea / (parameter.page / t._distance) ;

  //拖動滾動條
  t.liveEvent();

  //點擊向前按鈕,如果按下鼠標到松開鼠標的時長<100ms,則為單次點擊
  forward.bind(startWhen, function(e){

   t._turnOf = 'forward';

   t.longPress(e, t.direction );

  }).bind(endWhen, function(e) { 

   t.mouseupFun(e, t.direction);

   t._turnOf = null;

  });

  //點擊向后按鈕
  backward.bind(startWhen, function(e){

   t.longPress(e, t.direction );

  }).bind(endWhen, function(e){

   t.mouseupFun(e, t.direction );

  });

  //注冊鼠標滾動事件
  // FF
  if(document.addEventListener){
   document.addEventListener('DOMMouseScroll',t.mouseRuning,false);
  }

  //其它瀏覽器
  document.onmousewheel = t.mouseRuning;
  }
 },

 //鼠標滾動
 mouseRuning: function(e) {

  var t = simulation;

  e = e || window.event;

  //ie、FF
  if (e.detail) {
  if (e.detail < 0) {

   t._turnOf = 'forward';

   t.direction ();

  } else{

   t._turnOf = null;
   t.direction ();
  }
  // chrome
  } else if(e.wheelDelta) {

  if (e.wheelDelta > 0) {

   t._turnOf = 'forward';

   t.direction ();

  } else{

   t._turnOf = null;
   t.direction ();

  }
  } 
 },

 //判斷是否長點擊
 longPress: function(e, moveFun ) {

  var t = this;

  if ( u.match(/\b(Windows\sNT|Macintosh)\b/) ) {
  e = e || window.event;

  // 限制為鼠標左鍵點擊才觸發(fā)
  if (/^mouse/.test(e.type) && e.which !== 1) {
   return;
  }
  }

  t._setintervalId = setInterval(function(){

  t._mousedownTimer += 10;

  if( t._mousedownTimer >= 100 ){

   moveFun();
  }

  },20);
 },

 mouseupFun: function(e, moveFun) {
  
  var t = this;

  if ( u.match(/\b(Windows\sNT|Macintosh)\b/) ) {
  e = e || window.event;

  // 限制為鼠標左鍵點擊才觸發(fā)
  if (/^mouse/.test(e.type) && e.which !== 1) {
   return;
  }
  }

  clearTimeout(t._setintervalId);

  if( t._mousedownTimer < 100 ) {

  moveFun();
  }

  t._mousedownTimer = 0;
 },

 direction:function() {
  var t = simulation,
  barTop = t._scroll.position().top,
  pageTop = t._wapper.position().top,
  moveDistance = {};

  if ( t._turnOf === 'forward') {

   //頁面到頂，不執(zhí)行任何操作
   if (barTop == 0) {
   return;
   }

   moveDistance = {
   page: pageTop + t._distance,
   bar: barTop - parameter.scrollDistance
   }

   //如果滾動條距離頂部的距離少 < 每次滾動的距離，或者已經(jīng)滾動到頂部，則不再滾動
   if(barTop < parameter.scrollDistance || barTop <= 0){

   moveDistance = {
    page: 0,
    bar: 0
   }
   }

  } else {

   //頁面到底，不執(zhí)行任何操作
   if (barTop == parameter.barArea - parameter.scrollHeight){
   return;
   }

   moveDistance = {
   page: pageTop - t._distance,
   bar: barTop + parameter.scrollDistance
   };

   // 如果滾動條距離底部的距離值 < 每次滾動的距離 或者已經(jīng)到底部，則一次滾到底
   if ( moveDistance.bar + parameter.scrollHeight >= parameter.barArea) {

   moveDistance = {
    page: parameter.view - parameter.page,
    bar: parameter.barArea - parameter.scrollHeight
   };

   }
  }

  t._scroll.css({top: moveDistance.bar});
  t._wapper.css({top: moveDistance.page}); 
 },

 //拖動滾動條
 liveEvent: function() {
  var t = this,
  draging = false,
  currentY = 0,
  lastY = 0,
  pageY = 0; 

  //檢測設(shè)備類型
  var _ua = function(e) {

  var Pos = null;

  if ( u.match(/\b(Windows\sNT|Macintosh)\b/) ) {
   e = e || window.event;

   // 限制為鼠標左鍵點擊才觸發(fā)
   if (/^mouse/.test(e.type) && e.which !== 1) {
   return;
   }

   Pos = {
   left : e.pageX,
   top: e.pageY
   }

  } else {
   Pos = {
   left : e.originalEvent.targetTouches[0].pageX,
   top: e.originalEvent.targetTouches[0].pageY
   }
  }
  return Pos;
  };

  var _start = function(e) {

  //監(jiān)控鼠標
  e.preventDefault();

  if (t._scroll.get(0).setCapture) {
   t._scroll.get(0).setCapture();
  }

  draging = true;

  //記錄當前滾動條的坐標
  lastY = t._scroll.position().top; 

  //記錄按下鼠標的坐標
  pageY = _ua(e).top;
  };

  var _drag = function(e) {

  if( draging ) {

   var pageTop = t._wapper.position().top;
   var barTop = t._scroll.position().top;

   //滾動條每移動1px，頁面相對滾動Npx 再 * 當前滾動條的到頂部的距離
   var pageMoveDistance = -(parameter.page / (parameter.barArea / 1)) * barTop;

   if (lastY + ( _ua(e).top - pageY ) < 0) {
   currentY = 0;
   pageMoveDistance = 0;

   } else if( lastY + ( _ua(e).top - pageY) + parameter.scrollHeight >= parameter.barArea) {
   currentY = parameter.barArea - parameter.scrollHeight;
   pageMoveDistance = parameter.view - parameter.page;
   }
   else {
   currentY = lastY + ( _ua(e).top - pageY);
   }

   t._scroll.css({ top:currentY});
   t._wapper.css({top: pageMoveDistance}); 
  }
  };

  var _end = function(e) {

  if (draging) {

   draging = false;

   //在IE下釋放對鼠標的控制
   if (t._scroll.get(0).setCapture) {
   t._scroll.get(0).releaseCapture();
   }
   
   document.onmousemove = null;
   document.onmouseup = null;
  }
  };

  t._scroll.bind( startWhen, _start );

  t._wapper.bind( startWhen, _start );

  $(document).bind( moveWhen, _drag );
  
  $(document).bind( endWhen, _end );

  $(document).bind('blur', _end);
 }
 }
 return simulation;
});

以上就是javascript模擬滾動條實現(xiàn)代碼，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: