基于vue.js 2.x的虛擬滾動(dòng)條的示例代碼

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

...
render(_c){
 return _c(
 // ...
 {
 mouseenter: function(e) {
 vm.$emit('showVBar'); // 觸發(fā)父組件事件，顯示滾動(dòng)條
 }
 }
 // ...
 )
}

var style = vm.scrollContentStyle;
 style.overflow = 'hidden';
 // ...
 {
 style: style
 }
 // ...

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

// ...
 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;
 }
 // ...

// ...
 var temp;
 var deltaY = {
 deltaY: this.vScrollBar.ops.deltaY // 獲取用戶(hù)配置的deltaY
 };
 if(!this.isMouseLeavePanel || this.vScrollBar.ops.keepShow){
 if ((this.vScrollBar.state.height = temp = this.getVBarHeight(deltaY))) { // 判斷條件
 // 重新設(shè)置滾動(dòng)條的狀態(tài)
 this.vScrollBar.state.top = this.resizeVBarTop(temp);
 this.vScrollBar.state.height = temp.height;
 this.vScrollBar.state.opacity = this.vScrollBar.ops.opacity;
 }
 }
 // ...

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

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;
}

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

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); // 把事件放到數(shù)組里面，等銷(xiāo)毀之前移除掉注冊(cè)的時(shí)間。
 }

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"
 });
 }

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);
 }
 }
 // 這些是傳遞給父組件的監(jiān)聽(tīng)滾動(dòng)的函數(shù)的。
 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);
 },

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