實戰-jQuery實現自定義滾動條插件

效果圖：

這篇文章主要講解js交互，就不用篇幅去告訴大家怎么寫html css了，讓文章言簡意賅。

大體思路:

如何實現滾動滑塊，讓滑塊與內容一起聯動呢？請看下圖：

 

首先來看，

空心鼠標位置與實心鼠標位置的距離 是不是等於滑塊移動的距離X0 呢？

答：等於

滑塊移動的最大距離X0是多少呢？

答：滾動條的高度X - 滑塊的高度

內容能滾動最大高度Y0是多少呢？

答：內容總高度Y - 內容可視區的高度

通過比較：可以得出滾動比率：

 

那么代碼應該怎么寫呢：

第一步： 獲取鼠標移動距離 = 滑塊移動距離

第二步： 獲取滑塊可移動的距離

第三步： 內容可滾動的高度

第四步： 通過上面的滾動比例關系可以獲取內容滾動高度

最五步：設置滑塊的位置

 

插件封裝大框：

• 首先創建一個構造函數CusScrollBar
• 然后通過new操作符實例化這個構造函數，並調用初始化函數_init，_init是這個實例初始化的入口。

　　補充：（自調用匿名函數：通過創建一個自調用匿名函數，創建一個特殊的函數作用域，該作用域中的代碼不會和已有的同名函數、方法和變量以及第三方庫發生沖突。)

• win，doc，$:   　　對應外部傳過來的window對象，document對象，jQuery對象。
• CusScrollBar：　　創建一個構造函數，並調用初始化函數_init()。
• [options]：　　　　實例化參數傳入到_init函數中
• this：                   代表實例

原型上添加方法：

方案1：

CusScrollBar.prototype._init = function () {
    console.log("test");
}

方案2: （基於jquery的extend方法）

$.extend(CusScrollBar.prototype, {
　　A: function () {},
　　B: function () {}
})

　　　　　　補充：$.extend方法 :

　　　　　　

暴露構造函數，使外部可調用：

win.CusScrollBar = CusScrollBar;

 上面的大框講解完成了，下面開始講解原型上定義的方法：

　_init()函數：

_init: function (options) {
  // 保存外部的this 這里的this =》 CusScrollBar
  var self = this;
  // 配置默認參數
  self.options = {
    scrollDir: 'y', // 滾動的方向
    contSelector: '', // 滾動內容區選擇器
    barSelector: '', // 滾動條選擇器
    sliderSelector: '', // 滾動滑塊兒選擇器
    correctSelector: '.correct-bot', // 矯正元素
  };
  // 通過深拷貝將外部參數與默認參數合並
  $.extend(true, self.options, options || {});
  // 調用_initDomEvent方法
  self._initDomEvent();
  // 返回self，實現鏈式調用
  return self;
},

 

_initDomEvent()函數：

_initDomEvent: function () {
  var opts = this.options;
  // 滾動內容區對象，必須填
  this.$cont = $(opts.contSelector);
  // 滾動條滑塊對象，必須填
  this.$slider = $(opts.sliderSelector);
  // 滾動條對象
  this.$bar = opts.barSelector ?
    $(opts.barSelector) :
    self.$slider.parent();
  // 獲取文檔對象
  this.$doc = $(doc);
  // 矯正元素對象
  this.$correct = $(opts.correctSelector);
  this._initSliderDragEvent()
    ._bindContScroll();
},

_initSliderDragEvent()函數

_initSliderDragEvent: function () {
  var slider = this.$slider,
    sliderEl = slider[0],
    self = this;
  if (sliderEl) {
    var doc = this.$doc,
      // 拖動起始位置
      dragStartPagePosition,
      // 
      dragStartScrollPosition,
      // 拖動比例
      dragContBarRate;

    function mousemoveHandler(e) {
      e.preventDefault();
      console.log('mousemove');
      if (dragStartPagePosition == null) return;
      self.scrollTo(
        dragStartScrollPosition +
        (e.pageY - dragStartPagePosition) * dragContBarRate
      );
    }

    // 綁定事件
    slider.on('mousedown', function (e) {
      // 阻止瀏覽器默認行為
      e.preventDefault();
      console.log('mousedown');
      dragStartPagePosition = e.pageY;
      dragStartScrollPosition = self.$cont[0].scrollTop;
      dragContBarRate =
        self.getMaxScrollPosition() / self.getMaxSliderPosition();

      // 在document上綁定mousemove事件，是為了當沒有松開鼠標，但是鼠標移出滾輪時依然能夠觸發mousemove事件，提升用戶體驗。
      doc
        .on('mousemove.scroll', mousemoveHandler)
        .on('mouseup.scroll', function (e) {
          console.log('mouseup');
          doc.off('.scroll');
        });
    });
  }
  return self;
},

getMaxSliderPosition()

// 滑動可移動的距離
getMaxSliderPosition: function () {
  var self = this;
  return self.$bar.height() - self.$slider.height();
},

mousemoveHandler()

function mousemoveHandler(e) {
  e.preventDefault();
  console.log('mousemove');
  if (dragStartPagePosition == null) return;
  self.scrollTo(
    dragStartScrollPosition +
    (e.pageY - dragStartPagePosition) * dragContBarRate
  );
}

scrollTo()

// 移動到具體位置
scrollTo: function (positionVal) {
  var self = this;
  self.$cont.scrollTop(positionVal);
},

_bindContScroll()

// 監聽內容的滾動，同步滑塊的位置
_bindContScroll: 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;
},

getSliderPosition()

// 計算滑塊兒的當前位置
getSliderPosition: function () {
  var self = this,
    maxSliderPosition = self.getMaxSliderPosition();
  return Math.min(
    maxSliderPosition,
    maxSliderPosition *
    self.$cont[0].scrollTop /
    self.getMaxScrollPosition()
  );
},

 

 

附上源碼地址：https://github.com/liuzhaoxu1996/slider-plugin   

歡迎點贊，fork me 謝謝~~~