基于vue.js 2.x的虚拟滚动条的示例代码

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

9、销毁注册的事件。

刚才我们已经把注册事件放到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项目地址

以上部分就是这个组件的核心源码了。希望对大家的学习有所帮助，也希望大家多多支持软件开发网。