Vue自定义滚动条盒子

应用开发过程中当web页面的内容过多时则会出现滚动条，而原生的滚动条的样式除了谷歌浏览器外其他的浏览器都不好修改，于是打算自己写一个容器组件，当内容过多时隐藏默认的滚动条显示自定义滚动条（只做了垂直滚动条，懒~）

先来看看如何引用这个滚动盒子（hd-scroll，注："hd"是与我相关某个名字的简称）组件，先在app里面填充100个div：

<template>
    <div class="container">
        <div v-for="i in 100" :key="i">{{ i }}</div>
    </div>
</template>

然后在把container容器的大小限制一下：

<style lang="scss" scoped>
    .container {
        background-color: whitesmoke;
        width: 200px;
        height: 400px;
    }
</style>

打开页面，可以看到浏览器右边出现了默认的滚动条，而且我们添加的div元素也超出了container范围。

解决这个问题的一般方式是在样式里面添加“overflow:auto”属性，再来看一下效果：

改善了许多，但是滚动条的样式却不好改变，于是现在引入hd-scroll组件：

<template>
    <div class="container">
        <hd-scroll>
            <div v-for="i in 100" :key="i">{{ i }}</div>
        </hd-scroll>
    </div>
</template>

<script>
import hdScroll from './components/hdScroll'

export default {
    components: {
        hdScroll
    }    
}
</script>

<style lang="scss" scoped>
    .container {
        background-color: whitesmoke;
        width: 200px;
        height: 400px;
    }
</style>

在这里需要注意的是用<hd-scroll>标签来包裹住大量的要渲染的元素，同时删除overflow属性，添加了滚动盒子组件后的页面看起来或许是这个样子的：

ps:鼠标的小黄点是录频工具的，不是页面自带的。。。

滚动盒子(hd-scroll)的实现方式如下：

<template>
    <div class="hd-scroll scrollbox" ref="box" 
    @mousewheel.stop.prevent="handleMouseWheel" 
    @mouseenter="handleMouseEnter" 
    @mouseleave="handleMouseLeave">
        <transition name="fade">
            <div :class="['scrollbar', { force: force }]" ref="bar" 
            v-show="show" :style="{ 'height': barHeight + 'px'}" 
            @mousedown="handleMouseDown"></div>
        </transition>
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: 'hdScroll',
    data() {
        return {
            box: undefined, // 自定义滚动条盒子
            bar: undefined, // 滚动条
            barHeight: 100, // 滚动条高度
            ratio: 1,       // 滚动条偏移率
            force: false,   // 滚动条是否被鼠标光标按住
            hover: false,   // 鼠标光标是否悬停在盒子上
            show: false     // 是否显示滚动条
        }
    },
    mounted() {
        this.box = this.$refs.box
        this.bar = this.$refs.bar
        // 滚动条全局可拖动
        document.addEventListener('mouseup', this.handleMouseUp)
        document.addEventListener('mousemove', this.handleMouseMove)
    },
    methods: {
        /**
         * 鼠标滚轮事件
         * @param {object} e 事件
         */
        handleMouseWheel(e) {
            this.box.scrollTop -= e.wheelDelta / 4
            this.bar.style.transform = 'translateY(' + (this.box.scrollTop + this.box.scrollTop / this.ratio) + 'px)'
        },
        /**
         * 鼠标按下
         * @param {object} e 事件
         */
        handleMouseDown(e) {
            if (e.target === this.bar) {
                this.box.prevY = e.pageY
                this.force = true
            }
        },
        /**
         * 鼠标按键释放
         */
        handleMouseUp() {
            this.force = false
            this.box.prevY = null
            if (!this.hover) {
                this.show = false
            }
        },
        /**
         * 鼠标移动
         * @param {object} e 事件
         */
        handleMouseMove(e) {
            if (this.force) {
                // 阻止默认选中事件(IE下无效)
                e.preventDefault()
                this.box.scrollTop += (e.pageY - this.box.prevY) * this.ratio
                this.bar.style.transform = 'translateY(' + (this.box.scrollTop + this.box.scrollTop / this.ratio) + 'px)'
                this.box.prevY = e.pageY
            }
        },
        /**
         * 鼠标光标进入盒子范围
         */
        handleMouseEnter() {
            this.hover = true
            if (this.box.scrollHeight > this.box.offsetHeight) {
                // 修正进度条高度和位置(建议通过事件触发)
                this.barHeight = this.box.offsetHeight ** 2 / this.box.scrollHeight
                this.ratio = (this.box.scrollHeight - this.box.offsetHeight) / (this.box.offsetHeight - this.barHeight)
                this.bar.style.transform = 'translateY(' + (this.box.scrollTop + this.box.scrollTop / this.ratio) + 'px)'
                // 显示滚动条
                this.$nextTick(() => this.show = true)
            }
        },
        /**
         * 鼠标光标离开盒子范围
         */
        handleMouseLeave() {
            this.hover = false
            if (!this.force) {
                this.show = false
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    // 滚动条宽度
    $scrollbar- 8px;

    .scrollbox {
        width: 100%;
        height: 100%;
        position: relative;
        padding-right: $scrollbar-width;
        overflow-y: hidden;
    }
    .scrollbar {
        width: $scrollbar-width;
        height: 100%;
        background-color: darkgray;
        position: absolute;
        right: 0;
        border-radius: $scrollbar-width / 2;
        &:hover {
            background-color: gray;
        }
        &.force {
            background-color: gray;
        }
    }

    // Vue进入离开动画
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to {
        opacity: 0;
    }
</style>

在谷歌里鼠标滚轮事件可使用deltaY来控制滚动，不过为了兼容ie，选择了使用wheelDelta来代替，它们之间的关系大约是wheelDelta == -4 * deltaY。在设置滚动条移动的过程中是通过CSS3属性transform，在低版本ie浏览器中可能无法运行，可以考虑使用style.top来代替，不过看网上大神们都是通过两个div容器来隐藏主默认的滚动条，实现方法如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #app {
            width: 200px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="out-box">
            <div class="inner-box">
                <div class="container">
                    <div v-for="i in 100" :key="i">{{ i }}</div>
                </div>
            </div>
        </div>
    </div>
    <script src="./vue.min.js"></script>
    <script>
        new Vue({
            el: '#app'
        })
    </script>
</body>
</html>

先设置好页面结构，在这里#app是宽度200px, 高度400px的容器，我们需要使内容不溢出的同时隐藏滚动条：

.out-box {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.inner-box {
    width: 100%;
    height: 100%;
    position: absolute;
    padding-right: 17px;
    padding-bottom: 17px;
    overflow: auto;
}

只需要添加两个盒子属性就完成了，很简单吧

源码下载(需要自己装包)：https://files.cnblogs.com/files/viewts/hd-scroll.zip