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-width: 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