vue-滚动条

功能简介

功能比较简陋，仅实现了主要功能，水平滚动条，垂直滚动条，容器高宽改变时动态更改滚动条的大小，自定义颜色，方位等功能可通过添加配置参数实现

一、需要安装 “element-resize-detector”

npm install element-resize-detector

用于监听div宽高变化

二、创建工具类 util.js ，方便事件的绑定以及移除

/**
 * 绑定事件
 *
 * @export
 * @param {any} dom
 * @param {any} eventType
 * @param {any} callback
 */
export function on (dom, eventType, callback) {
    if (document.addEventListener) {
      dom.addEventListener(eventType, callback)
    } else {
      dom.attachEvent('on' + eventType, callback)
    }
  }
  
  /**
  * 解绑事件
  *
  * @export
  * @param {any} dom
  * @param {any} eventType
  * @param {any} callback
  */
  export function off (dom, eventType, callback) {
    if (document.removeEventListener) {
      dom.removeEventListener(eventType, callback)
    } else {
      dom.detachEvent('on' + eventType, callback)
    }
  }

三、创建容器 scroll.vue

<template>
    <div class="scroll" ref="scroll">
        <div class="scroll-container" ref="container">
            <div
                    class="scroll-content"
                    ref="content"
                    :style="{'width':'calc(100% + '+this.vSize+'px','height':'calc(100% + '+this.hSize+'px'}"
                    @scroll.stop="onScroll"
            >
                <slot></slot>
            </div>
        </div>
        <!--垂直滚动条-->
        <scroll-slider
                v-if="!hideV"
                :scrollTop="scrollTop"
                ref="sliderV"
                @change="silderVChange"
        ></scroll-slider>
        <!--水平滚动条-->
        <scroll-slider
                v-if="!hideH"
                sliderType="h"
                :scrollLeft="scrollLeft"
                ref="sliderH"
                @change="silderHChange"
        ></scroll-slider>
    </div>
</template>
<script>
    import slider from "./slider.vue";
    import ElementResizeDetectorMaker from "element-resize-detector";

    export default {
        name: "scroll",
        props: {
            //隐藏垂直滚动条
            hideV: {
                type: Boolean,
                default: false
            },
            //隐藏水平滚动条
            hideH: {
                type: Boolean,
                default: false
            },
            resize: Boolean
        },
        components: {
            "scroll-slider": slider
        },
        data() {
            return {
                //垂直滚动条宽度
                vSize: 17,
                //水平滚动条高度
                hSize: 17,
                scrollTop: 0,
                scrollLeft: 0,
            };
        },
        mounted() {
            this.computeSliderV();
            this.computeSliderH();
            // 监听slot视图变化, 方法内部会判断是否设置了开启监听resize
            this.resizeListener()
        },
        methods: {
            onScroll(event) {
                this.scrollTop = this.$refs["content"].scrollTop;
                this.scrollLeft = this.$refs["content"].scrollLeft;
            },
            silderVChange(newval) {
                this.$refs["content"].scrollTop = newval;
            },
            silderHChange(newval) {
                this.$refs["content"].scrollLeft = newval;
            },
            //计算垂直滚动条的长度
            computeSliderV() {
                if (this.hideV) {
                    return;
                }
                let clientEle = this.$refs["scroll"];
                let slotEle = this.$slots.default[0]["elm"];
                this.$refs.sliderV.computeSlider(slotEle,clientEle);
            },
            computeSliderH() {
                if (this.hideH) {
                    return;
                }
                let clientEle = this.$refs["scroll"];
                let slotEle = this.$slots.default[0]["elm"];
                this.$refs.sliderH.computeSlider(slotEle,clientEle);
            },

            // slot视图大小变化时的监听
            resizeListener() {
                // 没开启监听reszie方法
                if (!this.resize) return

                // 监听slot视图元素resize
                let elementResizeDetector = ElementResizeDetectorMaker({strategy: 'scroll',callOnAdd: false})

                // 记录视图上次宽高的变化
                const ele = this.$refs.scroll;
                elementResizeDetector.listenTo(ele, (element) => {
                    // 初始化百分比
                    this.computeSliderV();
                    this.computeSliderH();
                    this.scrollTop = this.$refs["content"].scrollTop;
                    this.scrollLeft = this.$refs["content"].scrollLeft;
                })
            },
        }
    };
</script>
<style>
    .scroll {
        position: relative;
        width: 100px;
        height: 100px;
        overflow: hidden;
    }

    .scroll-container {
        width: 100%;
        height: 100%;
    }

    .scroll-content {
        width: calc(100% + 17px);
        height: calc(100% + 17px);
        overflow: scroll;
    }

    .sliderContainer {
        position: absolute;
        border-radius: 5px;
    }

    .scroll-v {
        top: 0;
        bottom: 0;
        right: auto;
        width: 8px;
        height: 100%;
    }

    .scroll-h {
        left: 0;
        bottom: auto;
        right: 0;
        height: 8px;
        width: 100%;
    }

    .scroll-slider {
        position: absolute;
        background-color: #000000;
        opacity: 0.3;
        border-radius: 5px;
        cursor: pointer;
        transition: opacity .3s;;
    }

    .scroll-slider:hover {
        opacity: 0.5;
    }

    .scroll-v .scroll-slider {
        top: 0;
        right: 0;
        left: auto;
        bottom: auto;
    }

    .scroll-h .scroll-slider {
        top: auto;
        right: auto;
        left: 0;
        bottom: 0;
    }
</style>

四、创建滑块 slider.vue

<template>
    <div
            :style="[isShow]"
            class="sliderContainer"
            :class="sliderType=='h'?'scroll-h':'scroll-v'"
            ref="sliderContainer"
            @wheel.capture.stop="handlewheel"
    >
        <div
                class="scroll-slider"
                :style="[initSize,initLength,loc]"
                @mousedown.stop="sliderMousedown"
        ></div>
    </div>
</template>
<script>
    import {on, off} from "./util";

    export default {
        props: {
            //滚动条类型：h:水平滚动条，v:垂直滚动条
            sliderType: {
                type: String,
                default: "v"
            },
            //滚动条最小长度
            minLength: {
                type: Number,
                default: 20
            },
            size: {
                type: Number,
                default: 8
            },
            scrollTop: {
                type: Number,
                default: 0
            },
            scrollLeft: {
                type: Number,
                default: 0
            },
            color: {
                type: String,
                default: "#000000"
            },
            opacity: {
                type: Number,
                default: 0.3
            }
        },
        created() {
            //水平滚动条配置
            let h = {
                clientSize: "clientWidth",
                loc: "top",
                scrollSize: "scrollWidth",
                locsSize: "scrollHeight",
                loccSize: "clientHeight"
            };
            let v = {
                clientSize: "clientHeight",
                loc: "left",
                scrollSize: "scrollHeight",
                locsSize: "scrollWidth",
                loccSize: "clientWidth"
            };
            this.config = this.sliderType === "h" ? h : v;
        },
        data() {
            return {
                isBind: false,//标识是否已经绑定拖动事件，避免重复绑定
                percentage: 0,
                length: 0,
                startMove: false,
                offset: 0,
                position: {},
                config: {},
                isShowSilider: true,
                locValue: 0
            };
        },
        computed: {
            initSize() {
                return {
                    [this.sliderType === "h" ? "height" : "width"]: this.size + "px"
                };
            },
            //初始长度
            initLength() {
                return {
                    [this.sliderType === "h" ? "width" : "height"]: this.length + "px"
                };
            },
            //初始位置
            loc() {
                return {
                    [this.sliderType === "h" ? "left" : "top"]: this.offset + "px"
                };
            },
            //是否显示，隐藏即放到视野外
            isShow() {
                return {
                    [this.config.loc]: this.isShowSilider ? (this.locValue - this.size) + 'px' : '-' + this.siz + 'px'
                }
            }
        },
        methods: {
            sliderMousedown(event) {
                // 只有鼠标左键可以拖动
                if (event.button !== 0) {
                    return;
                }
                event.preventDefault();
                event.stopPropagation();
                event.stopImmediatePropagation();

                this.startMove = true;
                this.position.x = event.clientX;
                this.position.y = event.clientY;
                this.bindEvent();
            },
            bindEvent() {
                if (this.isBind) {
                    return;
                }
                on(document, "mouseup", this.mouseup);
                on(document, "mousemove", this.mousemove);
                this.isBind = true;
                this.startMove = true;
            },
            mouseup() {
                this.startMove = false;
                this.isBind = false;
                off(document, "mouseup", this.mouseup);
                off(document, "mousemove", this.mousemove);
            },
            mousemove(event) {
                if (!this.startMove) return;
                let x = event.clientX;
                let y = event.clientY;
                let moveX = x - this.position.x;
                let moveY = y - this.position.y;
                this.position.x = x;
                this.position.y = y;
                let move = this.sliderType === "h" ? moveX : moveY;
                this.computePosition(move);
            },
            computePosition(move) {
                let newloc = this.offset + move;
                if (newloc > this.maxOffset) {
                    newloc = this.maxOffset;
                }
                if (newloc < 0) newloc = 0;
                this.offset = newloc;
                this.$emit("change", newloc / this.percentage);
            },
            //计算滑块的一些属性
            computeSlider(scroll, client) {
                //内容真实长度或宽度
                let scrollSize = scroll[this.config.scrollSize];
                //容器的长度或宽度
                let clientSize = client[this.config.clientSize];
                let containerSize = this.$refs.sliderContainer[this.config.clientSize];
                this.length = containerSize * (clientSize / scrollSize);
                if (this.length < this.minLength) {
                    this.length = this.minLength;
                }
                if (clientSize >= scrollSize) {
                    this.length = 0;
                }
                //最大偏移距离
                this.maxOffset = containerSize - this.length;
                if(scrollSize - clientSize==0){
                    this.percentage=0;
                }else{
                    this.percentage = this.maxOffset / (scrollSize - clientSize);
                }
                this.isShowSilider = this.percentage > 0 && this.percentage < 1;
                let locsSize = scroll[this.config.locsSize];
                let loccSize = client[this.config.loccSize];
                //防止内容宽度比容器小的时候垂直滚动条和内容有距离
                this.locValue = locsSize < loccSize ? locsSize : loccSize;
            },
            handlewheel(event) {
                console.log(event);
            }
        },
        watch: {
            scrollTop() {
                this.offset = this.scrollTop * this.percentage;
            },
            scrollLeft() {
                this.offset = this.scrollLeft * this.percentage;
            }
        },
        destroyed() {
            off(document, "mouseup", this.mouseup);
            off(document, "mousemove", this.mousemove);
        }
    };
</script>

五、demo

<template>
    <div>
        <scroll :style="{width:width+'px',height:height+'px'}" resize>
            <div style="width: 100%;height: 100%;">
                <div>水龙吟·次韵章质夫杨花词</div>
                <div>似花还似非花，也无人惜从教坠。</div>
                <div>抛家傍路，思量却是，无情有思。</div>
                <div>萦损柔肠，困酣娇眼，欲开还闭。</div>
                <div>梦随风万里，寻郎去处，又还被、莺呼起。</div>
                <div>不恨此花飞尽，恨西园、落红难缀。晓来雨过，遗踪何在？</div>
                <div>一池萍碎。</div>
                <div>春色三分，二分尘土，一分流水。细看来，不是杨花，点点是离人泪。</div>
            </div>
        </scroll>
        <div>
            <span>scroll宽度：</span><input type="text" v-model="width"/>
            <span>scroll高度：</span><input type="text" v-model="height"/>
        </div>
    </div>
</template>
<script>
    import scroll from "./component/scroll.vue";

    export default {
        components: {
            scroll
        },
        data() {
            return {
                width: 300,
                height: 200
            }
        }
    };
</script>