介绍
VScroll 一款基于vue2.x构建的桌面PC端自定义模仿滚动条组件。反对自定义是否原生滚动条、自动隐藏、滚动条大小、层级及色彩等性能。领有丝滑般的原生滚动条体验！
除了垂直滚动条，同样的也反对程度滚动条。
应用起来非常简单，只需 <v-scroll></v-scroll> 即可疾速生成一个虚构的模仿滚动条。
参数配置
props: { // 是否显示原生滚动条 native: Boolean, // 是否自动隐藏滚动条 autohide: Boolean, // 滚动条尺寸 size: { type: [Number, String], default: '' }, // 滚动条色彩 color: String, // 滚动条层级 zIndex: null},疾速开始
在main.js中引入滚动条组件。
import VScroll from './components/vscroll';Vue.use(VScroll);应用组件
<!-- 反对原生滚动条 --><v-scroll native> <img src="https://cn.vuejs.org/images/logo.png" /> <p>这里是自定义内容。这里是自定义内容。这里是自定义内容。</p></v-scroll> <!-- 参数配置 --><v-scroll autohide size="15" color="#00a1e0" zIndex="2021"> <img src="https://cn.vuejs.org/images/logo.png" /> <p>这里是自定义内容。这里是自定义内容。这里是自定义内容。</p></v-scroll>编码实现
vscroll自定义滚动条模板。
<template> <div class="vui__scrollbar" ref="ref__box" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" v-resize="handleResize"> <div :class="['vscroll__wrap', {native: native}]" ref="ref__wrap" @scroll="handleScroll"> <div class="vscroll__view" v-resize="handleResize"><slot /></div> </div> <!-- //程度|垂直滚动条 --> <div :class="['vscroll__bar vertical', {ishide: !isShow}]" @mousedown="handleClickTrack($event, 0)" :style="{'width': parseInt(size)>=0 ? parseInt(size)+'px' : '', 'z-index': parseInt(zIndex)>=0 ? parseInt(zIndex) : ''}"> <div class="vscroll__thumb" ref="ref__barY" :style="{'background': color, 'height': barHeight+'px'}" @mousedown="handleDragThumb($event, 0)"></div> </div> <div :class="['vscroll__bar horizontal', {ishide: !isShow}]" @mousedown="handleClickTrack($event, 1)" :style="{'height': parseInt(size)>=0 ? parseInt(size)+'px' : '', 'z-index': parseInt(zIndex)>=0 ? parseInt(zIndex) : ''}"> <div class="vscroll__thumb" ref="ref__barX" :style="{'background': color, 'width': barWidth+'px'}" @mousedown="handleDragThumb($event, 1)"></div> </div> </div></template>/** * @Desc VueJs虚构滚动条组件VScroll * @Time andy by 2020/11/30 * @About Q：282310962 wx：xy190310 */<script> import domUtils from './utils/dom' export default { props: { // 显示原生滚动条 native: Boolean, // 自动隐藏滚动条 autohide: Boolean, // 滚动条尺寸 size: { type: [Number, String], default: '' }, // 滚动条色彩 color: String, // 滚动条层级 zIndex: null }, data() { return { barWidth: 0, // 滚动条宽度 barHeight: 0, // 滚动条高度 ratioX: 1, // 滚动条程度偏移率 ratioY: 1, // 滚动条垂直偏移率 isTaped: false, // 鼠标光标是否按住滚动条 isHover: false, // 鼠标光标是否悬停在滚动区 isShow: !this.autohide, // 是否显示滚动条 } }, mounted() { this.$ref__box = this.$refs.ref__box this.$ref__wrap = this.$refs.ref__wrap this.$ref__barY = this.$refs.ref__barY this.$ref__barX = this.$refs.ref__barX this.$nextTick(this.updated) }, // ... methods: { // 鼠标移入 handleMouseEnter() { this.isHover = true this.isShow = true this.updated() }, // 鼠标移出 handleMouseLeave() { this.isHover = false this.isShow = false }, // 拖动滚动条 handleDragThumb(e, index) { let _this = this this.isTaped = true let c = {} domUtils.isIE() ? (e.returnValue = false, e.cancelBubble = true) : (e.stopPropagation(), e.preventDefault()) document.onselectstart = () => false if(index == 0) { c.dragY = true c.clientY = e.clientY }else { c.dragX = true c.clientX = e.clientX } domUtils.on(document, 'mousemove', function(evt) { if(_this.isTaped) { if(c.dragY) { _this.$ref__wrap.scrollTop += (evt.clientY - c.clientY) * _this.ratioY _this.$ref__barY.style.transform = `translateY(${_this.$ref__wrap.scrollTop / _this.ratioY}px)` c.clientY = evt.clientY } if(c.dragX) { _this.$ref__wrap.scrollLeft += (evt.clientX - c.clientX) * _this.ratioX _this.$ref__barX.style.transform = `translateX(${_this.$ref__wrap.scrollLeft / _this.ratioX}px)` c.clientX = evt.clientX } } }) domUtils.on(document, 'mouseup', function() { _this.isTaped = false document.onmouseup = null; document.onselectstart = null }) }, // 滚动槽 handleClickTrack(e, index) { console.log(index) }, // 更新滚动 updated() { if(this.native) return // 垂直滚动条 if(this.$ref__wrap.scrollHeight > this.$ref__wrap.offsetHeight) { this.barHeight = this.$ref__box.offsetHeight **2 / this.$ref__wrap.scrollHeight this.ratioY = (this.$ref__wrap.scrollHeight - this.$ref__box.offsetHeight) / (this.$ref__box.offsetHeight - this.barHeight) this.$ref__barY.style.transform = `translateY(${this.$ref__wrap.scrollTop / this.ratioY}px)` }else { this.barHeight = 0 this.$ref__barY.style.transform = '' this.$ref__wrap.style.marginRight = '' } // 程度滚动条 ... }, handleResize() { // 更新滚动条状态 }, // ... } }</script>vue.js中如何监听DOM尺寸变动？非常简单，只需自定义一个指令用来监听滚动条区域的状态变动(宽度/高度)。
// 监听元素/DOM尺寸变动directives: { 'resize': { bind: function(el, binding) { let width = '', height = ''; function get() { const elStyle = el.currentStyle ? el.currentStyle : document.defaultView.getComputedStyle(el, null); if (width !== elStyle.width || height !== elStyle.height) { binding.value({width, height}); } width = elStyle.width; height = elStyle.height; } el.__vueReize__ = setInterval(get, 16); }, unbind: function(el) { clearInterval(el.__vueReize__); } }},<v-scroll @scroll="handleScroll"> <img src="https://cn.vuejs.org/images/logo.png" style="height:180px;margin-right:10px;" /> <br /> <p><img src="https://cn.vuejs.org/images/logo.png" style="height:250px;" /></p> <p>这里是内容信息！这里是内容信息！这里是内容信息！这里是内容信息！这里是内容信息！这里是内容信息！</p></v-scroll> // 监听滚动事件handleScroll(e) { this.scrollTop = e.target.scrollTop // 判断滚动状态 if(e.target.scrollTop == 0) { this.scrollStatus = '达到顶部' } else if(e.target.scrollTop + e.target.offsetHeight >= e.target.scrollHeight) { this.scrollStatus = '达到底部' }else { this.scrollStatus = '滚动中....' }}小伙伴们如果感兴趣也能够去捣鼓一下哈，如果有其它好的办法，欢送交换探讨。
好了，基于vue.js开发模仿滚动条组件就介绍到这里。心愿能喜爱~~✍✍
Vue+PC桌面端自定义弹窗组件VLayer