設計一個基於vue.js 2.x的虛擬滾動條

前言

記得之前偶然有一次瀏覽過一個開源的cms項目，發現這個項目的左邊的菜單已經超出了windows的寬度，我就好奇爲何沒出滾動條呢？而後我仔細一看，發現它左側有一個小的div，而後我嘗試着拖動它，發現竟能和原生的滾動條同樣！能夠經過查看它的源碼，發現了這款滾動條的叫作slimScroll，而後我去它的github倉庫看了下，研究了一下源碼，給個人感受是我也能作出來同樣的滾動條！經過vue實現！

設計

好， 如今開始咱們的設計滾動條的步驟：

設計滾動條dom

首先要思考的是:若是要使你須要滾動的內容滾動的話，首先一點是它的父dom必須爲固定長寬，即超出部分要隱藏掉，即加了個樣式:overflow: hidden, 因此，咱們給所要滾動的內容加個包裝，使它的長寬和父dom相等，而後有一個樣式叫：overflow: hidden ,這個包裝的元素就叫 scrollPanel

其次:咱們知道，咱們要作到與原生滾動條同樣強大！就必須設計水平滾動條和垂直滾動條，滾動條和scrollPanel屬於兄弟節點之間的關係，由於滾動條的存在不能使本來的樣式排版錯誤，而且支持top、left來控制其位置，因此滾動條的position必須是absolute,好了，咱們叫水平滾動條爲:hBar,垂直滾動條爲:vBar

最後：咱們設計了scrollPanel、vBar、hBar, 咱們須要一個父div來把他們包裝起來，而後加個樣式:position: relative

實踐

設計組件結構

首先，咱們的插件一共是4個組件，其中3個是子組件，1個是父組件，分別是:vueScroll(父組件)、scrollPanel(包裹須要滾動內容的子組件)、vBar(垂直滾動條)、hBar(水平滾動條)

其次，讓咱們設計一下各組件所分管的功能。這裏的組件分爲控制層組件和展現組件(熟悉react的同窗應該有所瞭解),展現層組件只完成展現的功能:vBar、hBar、scrollPanel,控制層組件有點相似於cpu，能夠控制子組件的各個狀態，好比寬、高、顏色、透明度、位置等等。控制層組件就是:vueScroll。

具體實現

hBar/vBar

hBar/vBar這兩個分別爲水平滾動條和垂直滾動條，所實現的功能大致是同樣的，因此舊放在一塊兒說了，這裏以vBar爲例。

1. props 接收父組件傳過來的屬性，具體爲:

{
    height: vm.state.height + 'px',  //滾動條的高度
    width: vm.ops.width, // 滾動條的寬度
    position: 'absolute', 
    background: vm.ops.background, // 滾動條背景色
    top: vm.state.top + 'px', // 滾動條的高度
    transition: 'opacity .5s', // 消失/顯示 所用的時間
    cursor: 'pointer', //
    opacity: vm.state.opacity, // 透明度
    userSelect: 'none' 
 }
複製代碼

2 事件，主要是當鼠標移動的時候，顯示滾動條。

...
render(_c){
    return _c(
       // ...
        {
            mouseenter: function(e) {
                vm.$emit('showVBar'); // 觸發父組件事件，顯示滾動條
            }
        }
       // ...
    )
}
複製代碼

其中state表示狀態，是在運行時可發生改變的，而 ops 則是配置參數，是用戶傳過來的。

scrollPanel

包裹滾動內容的組件，樣式需設置爲:overflow: hidden。

1. 樣式

var style = vm.scrollContentStyle;
 style.overflow = 'hidden';
 // ...
  {
      style: style
  }
 // ...
複製代碼

2. 事件

// ...
    render(_c) {
        // ...
            on: {
                mouseenter: function() {
                    vm.$emit('showBar');
                },
                mouseleave: function() {
                    vm.$emit('hideBar');
                }
            }
        // ...
    }
 // ...
複製代碼

vuescroll

控制組件。控制子組件顯示的狀態，添加各類監聽事件等。

1. 取得子組件的dom元素，用來取得dom的實時信息。

// ...
     initEl() {
        this.scrollPanel.el = this.$refs['vueScrollPanel'] && this.$refs['vueScrollPanel'].$el;
        this.vScrollBar.el = this.$refs['vScrollBar'] && this.$refs['vScrollBar'].$el;
        this.hScrollBar.el = this.$refs['hScrollBar'] && this.$refs['hScrollBar'].$el;
    }
    // ...
複製代碼

2. 顯示滾動條

顯示滾動條，包括顯示水平滾動條和顯示垂直滾動條，這裏以顯示垂直滾動條爲例：

// ...
        var temp;
        var deltaY = {
            deltaY: this.vScrollBar.ops.deltaY // 獲取用戶配置的deltaY
        };
        if(!this.isMouseLeavePanel || this.vScrollBar.ops.keepShow){
            if ((this.vScrollBar.state.height = temp = this.getVBarHeight(deltaY))) { // 判斷條件
                // 從新設置滾動條的狀態
                this.vScrollBar.state.top = this.resizeVBarTop(temp);
                this.vScrollBar.state.height = temp.height;
                this.vScrollBar.state.opacity = this.vScrollBar.ops.opacity;
            }
        }
    // ...
複製代碼

3. 獲取滾動條的高度

由於dom元素的高度不是固定的，因此你要實時地獲取dom真實的高度，滾動條的高度計算公式以下:

var height = Math.max(
            scrollPanelHeight / 
            (scrollPanelScrollHeight / scrollPanelHeight), 
            this.vScrollBar.minBarHeight
            );
複製代碼

即：滾動條的高度:scrollPanel的高度 == scrollPanel的高度:dom元素高度

4. resizeVBarTop,爲了防止偏差，而且能夠求出滾動條距離父元素的高度。

resizeVBarTop({height, scrollPanelHeight, scrollPanelScrollHeight, deltaY}) {
    // cacl the last height first
    var lastHeight = scrollPanelScrollHeight - scrollPanelHeight - this.scrollPanel.el.scrollTop;
    if(lastHeight < this.accuracy) {
        lastHeight = 0;
    }
    var time = Math.abs(Math.ceil(lastHeight / deltaY));
    var top = scrollPanelHeight - (height + (time * this.vScrollBar.innerDeltaY));
    return top;
}
複製代碼

5. 監聽滾輪滾動的事件。

// ...
    on: {
        wheel: vm.wheel
    }
    // ...
     wheel(e) {
        var vm = this;
        vm.showVBar();
        vm.scrollVBar(e.deltaY > 0 ? 1 : -1, 1);
        e.stopPropagation();
    }
    // ...
複製代碼

6. 監聽滾動條拖拽事件

listenVBarDrag: function() {
        var vm = this;
        var y;
        var _y;
        function move(e) {
            _y = e.pageY;
            var _delta = _y - y;
            vm.scrollVBar(_delta > 0 ? 1 : -1, Math.abs(_delta / vm.vScrollBar.innerDeltaY));
            y = _y;
        }
        function t(e) {
            var deltaY = {
                deltaY: vm.vScrollBar.ops.deltaY
            };
            if(!vm.getVBarHeight(deltaY)) {
                return;
            }
            vm.mousedown = true;
            y = e.pageY; // 記錄初始的Y的位置
            vm.showVBar();
            document.addEventListener('mousemove', move);
            document.addEventListener('mouseup', function(e) {
                vm.mousedown = false;
                vm.hideVBar();
                document.removeEventListener('mousemove', move);
            });
        }
        this.listeners.push({
            dom: vm.vScrollBar.el,
            event: t,
            type: "mousedown"
        });
        vm.vScrollBar.el.addEventListener('mousedown', t); // 把事件放到數組裏面，等銷燬以前移除掉註冊的時間。
    }
複製代碼

7. 適配移動端，監聽touch事件。原理跟拖拽事件差很少，無非就是多了個判斷，來判斷當前方向是x仍是y。

listenPanelTouch: function() {
        var vm = this;
        var pannel = this.scrollPanel.el;
        var x, y;
        var _x, _y;
        function move(e) {
            if(e.touches.length) {
                var touch = e.touches[0];
                _x = touch.pageX;
                _y = touch.pageY;
                var _delta = void 0;
                var _deltaX = _x - x;
                var _deltaY = _y - y;
                if(Math.abs(_deltaX) > Math.abs(_deltaY)) {
                    _delta = _deltaX;
                    vm.scrollHBar(_delta > 0 ? -1 : 1, Math.abs(_delta / vm.hScrollBar.innerDeltaX));
                } else if(Math.abs(_deltaX) < Math.abs(_deltaY)){
                    _delta = _deltaY;
                    vm.scrollVBar(_delta > 0 ? -1 : 1, Math.abs(_delta / vm.vScrollBar.innerDeltaY));
                }
                x = _x;
                y = _y;
            }
        }
        function t(e) {
            var deltaY = {
                deltaY: vm.vScrollBar.ops.deltaY
            };
            var deltaX = {
                deltaX: vm.hScrollBar.ops.deltaX
            };
            if(!vm.getHBarWidth(deltaX) && !vm.getVBarHeight(deltaY)) {
                return;
            }
            if(e.touches.length) {
                e.stopPropagation();
                var touch = e.touches[0];
                vm.mousedown = true;
                x = touch.pageX;
                y = touch.pageY;
                vm.showBar();
                pannel.addEventListener('touchmove', move);
                pannel.addEventListener('touchend', function(e) {
                    vm.mousedown = false;
                    vm.hideBar();
                    pannel.removeEventListener('touchmove', move);
                });
            }
        }
        pannel.addEventListener('touchstart', t);
        this.listeners.push({
            dom: pannel,
            event: t,
            type: "touchstart"
        });
    }
複製代碼

9. 滾動內容

滾動內容的原理無非就是改變scrollPanel的scrollTop/scrollLeft來達到控制內容上下左右移動的目的。

scrollVBar: function(pos, time) {
        // >0 scroll to down <0 scroll to up
         
        var top = this.vScrollBar.state.top; 
        var scrollPanelHeight = getComputed(this.scrollPanel.el, 'height').replace('px', "");
        var scrollPanelScrollHeight = this.scrollPanel.el.scrollHeight;
        var scrollPanelScrollTop = this.scrollPanel.el.scrollTop;
        var height = this.vScrollBar.state.height;
        var innerdeltaY = this.vScrollBar.innerDeltaY;
        var deltaY = this.vScrollBar.ops.deltaY;
        if (!((pos < 0 && top <= 0) || (scrollPanelHeight <= top + height && pos > 0) || (Math.abs(scrollPanelScrollHeight - scrollPanelHeight) < this.accuracy))) {
            var Top = top + pos * innerdeltaY * time;
            var ScrollTop = scrollPanelScrollTop + pos * deltaY * time;
            if (pos < 0) {
                // scroll ip
                this.vScrollBar.state.top = Math.max(0, Top);
                this.scrollPanel.el.scrollTop = Math.max(0, ScrollTop);
            } else if (pos > 0) {
                // scroll down
                this.vScrollBar.state.top = Math.min(scrollPanelHeight - height, Top);
                this.scrollPanel.el.scrollTop = Math.min(scrollPanelScrollHeight - scrollPanelHeight, ScrollTop);
            }
        }
        // 這些是傳遞給父組件的監聽滾動的函數的。
        var content = {};
        var bar = {};
        var process = "";
        content.residual = (scrollPanelScrollHeight - scrollPanelScrollTop - scrollPanelHeight);
        content.scrolled = scrollPanelScrollTop;
        bar.scrolled = this.vScrollBar.state.top;
        bar.residual = (scrollPanelHeight - this.vScrollBar.state.top - this.vScrollBar.state.height);
        bar.height = this.vScrollBar.state.height;
        process = bar.scrolled/(scrollPanelHeight - bar.height);
        bar.name = "vBar";
        content.name = "content";
        this.$emit('vscroll', bar, content, process);
    },
複製代碼

10. 銷燬註冊的事件。

剛纔咱們已經把註冊事件放到listeners數組裏面了，咱們能夠在beforedestroy鉤子裏將他們進行銷燬。

// remove the registryed event.
    this.listeners.forEach(function(item) {
        item.dom.removeEventListener(item.event, item.type);
    });
複製代碼

以上部分就是這個組件的核心源碼了。

運行截圖

PC端運行截圖以下圖所示：

註冊監聽事件之後以下圖所示：

在手機上運行截圖：

能夠看出，跟原生滾動條表現效果一致。

結語&感悟

以上就基本把我設計的滾動條設計完了，首先很感激掘金給了我這麼一個分享平臺，而後感謝slimScroll的做者給了我這麼一個思路。作完這個插件， 我對dom元素的scrollWidth、scrollHeigh、scrollTop、scrollLeft的瞭解更多了，最後，附上github項目地址，若是本文對你有所幫助，請點個star，很是感謝~