Vue封装滚动条组件(可自定义滚动滚动条速率、颜色等)

不念不忘少年蓝@ 2022-05-13 12:16 803阅读 0赞

<template>
      <div
        class="v-scroll-bar"
        @wheel.prevent="wheelEventHandle"
        :style="{height:height+'px'}"
        ref="jScroll">
        
        <div class="scroll-content"
          :id="domId"
          :style="scrollContentStyles"
          ref="JScrollWrapper">
          <slot></slot>
        </div>
        
        <div :class="['scroll-bar-wrap',autoHide?'autoHide':'']"
          :style="scrollWrapStyle"
          @mousedown.prevent.stop="clickBarWrapHandler">
          <div
            ref="bar"
            class="scroll-bar"
            :style="scrollBarStyle"
            @mousedown.prevent.stop="clickBarHandler">
          </div>
        </div>
      </div>
    </template>
    
    <script>
      export default {
        name: 'v-scroll-bar',
        props: {
          //  外框高度
          height: {type: Number, default: 100, required: true},
          // 速度
          speed: {
            validator(value) {
              return value <= 5 && value >= 0;
            },
            default: 0
          },
          //自动隐藏
          autoHide: {type: Boolean, default: true},
          //滚动条宽度
          barWidth: {type: Number, default: 6},
          //滚动条跑道颜色
          barWrapColor: {type: String, default: 'transparent'},
          //滚动条颜色
          barColor: {type: String, default: 'rgba(0,0,0,.6)'},
          //圆角
          radius: {type: Number, default: 10},
          //滚动条距离内容的距离
          gap: {type: Number, default: 0},
          // id
          domId: String // 标识，以防一个页面出现多个组件引用此组件
        },
        data() {
          return {
            // 滚动内容的高度
            domClientHeight: 0,
            //  滚动距离
            scrollTop: 0,
            dom: null
          };
        },
        computed: {
          //  滚动内容的样式
          scrollContentStyles() {
            return {
              transform: `translateY(${this.scrollTop}px)`,
              paddingRight: `${this.gap}px`,
            };
          },
          //  滚动条外框样式
          scrollWrapStyle() {
            return {
              width: `${this.barWidth}px`,
              backgroundColor: this.barWrapColor,
              borderRadius: `${this.radius}px`,
            };
          },
          //  滚动条样式
          scrollBarStyle() {
            this.translateY = -this.scrollTop * this.height / this.domClientHeight;
    
            let translateY = `translateY(${this.translateY}px)`;
    
            return {
              height: `${this.scrollBarHeight}px`,
              transform: translateY,
              msTransform: translateY,
              webkitTransform: translateY,
              backgroundColor: this.barColor,
              borderRadius: `${this.radius}px`
            };
          },
          //  滚动条高度
          scrollBarHeight() {
            let barHeight = this.height * this.height / this.domClientHeight;
            if (barHeight >= this.height) return 0;
            return barHeight;
          },
          // 最大滚动高度
          maxScrollTop() {
            return this.domClientHeight - this.height;
          }
        },
        methods: {
          //  滚轮事件处理
          wheelEventHandle(event) {
            if (!this.dom) {
              this.dom = this.$refs.JScrollWrapper;
              this.getDomClientHeight();
            }
    
            if (this.scrollBarHeight === 0) return;
    
            let {deltaY} = event;
            let isFirefox = this.$_lib.navigatorIs('firefox');
    
            deltaY += this.speed;
    
            this.scrollStep = isFirefox ? Math.abs(deltaY * 4) : Math.abs(deltaY);
    
            if (deltaY > 0) this.prevScorllHandle();
            if (deltaY < 0) this.nextScorllHandle();
          },
          //  向上滚动
          prevScorllHandle() {
            let isMax = this.maxScrollTop - Math.abs(this.scrollTop) > this.scrollStep;
    
            if (isMax) {
              this.scrollTop -= this.scrollStep;
              this.$emit('max');
            } else {
              this.scrollTop = -this.maxScrollTop;
            }
          },
          //  向下滚动
          nextScorllHandle() {
            let isMin = Math.abs(this.scrollTop) - this.scrollStep > 0;
    
            if (isMin) {
              this.scrollTop += this.scrollStep;
              this.$emit('min');
            } else {
              this.scrollTop = 0;
            }
          },
          //滑块点击事件
          clickBarHandler(event) {
            event.stopImmediatePropagation();
            document.addEventListener('mousemove', this.mouseMoveDocumentHandler, false);
            document.addEventListener('mouseup', this.mouseUpDocumentHandler, false);
            document.onselectstart = () => false;
    
            let ctt = event.currentTarget;
    
            this.yMove = ctt.offsetHeight - (event.clientY - ctt.getBoundingClientRect().top);
          },
          //  鼠标移动事件
          mouseMoveDocumentHandler(event) {
            let prevPage = this.yMove;
    
            if (!prevPage) return;
            let thumbClickPosition = this.$refs['bar'].offsetHeight - prevPage;
            this.barMoveHandle(event, this.$el, thumbClickPosition);
          },
          //  鼠标抬起来的事件
          mouseUpDocumentHandler() {
            this.yMove = 0;
            document.removeEventListener('mousemove', this.mouseMoveDocumentHandler);
            document.onselectstart = null;
          },
          //滑块外框事件
          clickBarWrapHandler(event) {
            let thumbHalf = this.$refs['bar'].offsetHeight / 2;
            this.barMoveHandle(event, event.target, thumbHalf);
          },
          //  滑块移动处理
          barMoveHandle(event, dom, position) {
            let offset = Math.abs(dom.getBoundingClientRect()['top'] - event.clientY);
            let thumbPositionPercentage = (offset - position) * 100 / this.$el.offsetHeight;
            let scrollTop = -(thumbPositionPercentage * this.domClientHeight / 100);
    
            if (-scrollTop >= this.maxScrollTop) {
              this.$emit('max');
              return this.scrollTop = -this.maxScrollTop;
            } else if (scrollTop >= 0) {
              this.$emit('min');
              return this.scrollTop = 0;
            }
    
            this.scrollTop = scrollTop;
          },
          //  如果有iframe 也需要处理
          iframeDocumentHandle() {
            let iframe = document.getElementsByTagName('iframe');
    
            if (iframe) {
              for (let i = 0; i < iframe.length; i++) {
                let iframeDocument = iframe[i].contentWindow.document;
                iframeDocument.addEventListener('mouseup', this.mouseUpDocumentHandler, false);
              }
            }
          },
          // 获取dom高度
          getDomClientHeight() {
            this.domClientHeight = this.dom.clientHeight;
            if (this.dom && this.domClientHeight === 0) {
              let event = () => {
                this.domClientHeight = this.dom.clientHeight;
              };
    
              this.dom.addEventListener('mouseover', event);
    
              if (this.domClientHeight !== 0) {
                this.dom.addEventListener('mouseout', () => {
                  this.dom.removeEventListener('mouseover', event);
                });
              }
            }
          }
        },
    
        destroyed() {
          document.removeEventListener('mouseup', this.mouseUpDocumentHandler);
        },
        mounted() {
          this.$emit('scrollReady', () => {
            // if (this.domId) {
            this.iframeDocumentHandle();
    
            // this.dom = document.getElementById(this.domId);
            this.dom = this.$refs.JScrollWrapper;
            this.getDomClientHeight();
            // }
          });
        }
      };
    </script>
    <style lang="scss"
      rel="stylesheet/scss"
      scoped>
      .v-scroll-bar {
        width: 100%;
        overflow: hidden;
        position: relative;
        &:hover .autoHide {
          opacity: 1;
        }
        .autoHide {
          opacity: 0;
          transition: all 200ms;
        }
        .scroll-bar-wrap {
          position: absolute;
          top: 0;
          right: 0;
          height: 100%;
          overflow: hidden;
          cursor: pointer;
          .scroll-bar {
            width: 100%;
            cursor: ns-resize;
          }
        }
      }
    </style>

demo

<v-scroll-bar
        dom-id="lp-scroll"
        @scrollReady="cb=>lpScroll=cb"
        :bar-width="4"
        :height="300">
        <table class="head"></table>
    </v-scroll-bar>