Vue自定义滚动条盒子

Posted 2022-04-05 viewts

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

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

1 <template>
2     <div class="container">
3         <div v-for="i in 100" :key="i"> i </div>
4     </div>
5 </template>

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

1 <style lang="scss" scoped>
2     .container 
3         background-color: whitesmoke;
4         width: 200px;
5         height: 400px;
6     
7 </style>

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

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

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

 1 <template>
 2     <div class="container">
 3         <hd-scroll>
 4             <div v-for="i in 100" :key="i"> i </div>
 5         </hd-scroll>
 6     </div>
 7 </template>
 8 
 9 <script>
10 import hdScroll from ‘./components/hdScroll‘
11 
12 export default 
13     components: 
14         hdScroll
15         
16 
17 </script>
18 
19 <style lang="scss" scoped>
20     .container 
21         background-color: whitesmoke;
22         width: 200px;
23         height: 400px;
24     
25 </style>

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

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

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

  1 <template>
  2     <div class="hd-scroll scrollbox" ref="box" 
  3     @mousewheel.stop.prevent="handleMouseWheel" 
  4     @mouseenter="handleMouseEnter" 
  5     @mouseleave="handleMouseLeave">
  6         <transition name="fade">
  7             <div :class="[‘scrollbar‘,  force: force ]" ref="bar" 
  8             v-show="show" :style=" ‘height‘: barHeight + ‘px‘" 
  9             @mousedown="handleMouseDown"></div>
 10         </transition>
 11         <slot></slot>
 12     </div>
 13 </template>
 14 
 15 <script>
 16 export default 
 17     name: ‘hdScroll‘,
 18     data() 
 19         return 
 20             box: undefined, // 自定义滚动条盒子
 21             bar: undefined, // 滚动条
 22             barHeight: 100, // 滚动条高度
 23             ratio: 1,       // 滚动条偏移率
 24             force: false,   // 滚动条是否被鼠标光标按住
 25             hover: false,   // 鼠标光标是否悬停在盒子上
 26             show: false     // 是否显示滚动条
 27         
 28     ,
 29     mounted() 
 30         this.box = this.$refs.box
 31         this.bar = this.$refs.bar
 32         // 滚动条全局可拖动
 33         document.addEventListener(‘mouseup‘, this.handleMouseUp)
 34         document.addEventListener(‘mousemove‘, this.handleMouseMove)
 35     ,
 36     methods: 
 37         /**
 38          * 鼠标滚轮事件
 39          * @param object e 事件
 40          */
 41         handleMouseWheel(e) 
 42             this.box.scrollTop -= e.wheelDelta / 4
 43             this.bar.style.transform = ‘translateY(‘ + (this.box.scrollTop + this.box.scrollTop / this.ratio) + ‘px)‘
 44         ,
 45         /**
 46          * 鼠标按下
 47          * @param object e 事件
 48          */
 49         handleMouseDown(e) 
 50             if (e.target === this.bar) 
 51                 this.box.prevY = e.pageY
 52                 this.force = true
 53             
 54         ,
 55         /**
 56          * 鼠标按键释放
 57          */
 58         handleMouseUp() 
 59             this.force = false
 60             this.box.prevY = null
 61             if (!this.hover) 
 62                 this.show = false
 63             
 64         ,
 65         /**
 66          * 鼠标移动
 67          * @param object e 事件
 68          */
 69         handleMouseMove(e) 
 70             if (this.force) 
 71                 // 阻止默认选中事件(IE下无效)
 72                 e.preventDefault()
 73                 this.box.scrollTop += (e.pageY - this.box.prevY) * this.ratio
 74                 this.bar.style.transform = ‘translateY(‘ + (this.box.scrollTop + this.box.scrollTop / this.ratio) + ‘px)‘
 75                 this.box.prevY = e.pageY
 76             
 77         ,
 78         /**
 79          * 鼠标光标进入盒子范围
 80          */
 81         handleMouseEnter() 
 82             this.hover = true
 83             if (this.box.scrollHeight > this.box.offsetHeight) 
 84                 // 修正进度条高度和位置(建议通过事件触发)
 85                 this.barHeight = this.box.offsetHeight ** 2 / this.box.scrollHeight
 86                 this.ratio = (this.box.scrollHeight - this.box.offsetHeight) / (this.box.offsetHeight - this.barHeight)
 87                 this.bar.style.transform = ‘translateY(‘ + (this.box.scrollTop + this.box.scrollTop / this.ratio) + ‘px)‘
 88                 // 显示滚动条
 89                 this.$nextTick(() => this.show = true)
 90             
 91         ,
 92         /**
 93          * 鼠标光标离开盒子范围
 94          */
 95         handleMouseLeave() 
 96             this.hover = false
 97             if (!this.force) 
 98                 this.show = false
 99             
100         
101     
102 
103 </script>
104 
105 <style lang="scss" scoped>
106     // 滚动条宽度
107     $scrollbar-width: 8px;
108 
109     .scrollbox 
110         width: 100%;
111         height: 100%;
112         position: relative;
113         padding-right: $scrollbar-width;
114         overflow-y: hidden;
115     
116     .scrollbar 
117         width: $scrollbar-width;
118         height: 100%;
119         background-color: darkgray;
120         position: absolute;
121         right: 0;
122         border-radius: $scrollbar-width / 2;
123         &:hover 
124             background-color: gray;
125         
126         &.force 
127             background-color: gray;
128         
129     
130 
131     // Vue进入离开动画
132     .fade-enter-active, .fade-leave-active 
133         transition: opacity .5s;
134     
135     .fade-enter, .fade-leave-to 
136         opacity: 0;
137     
138 </style>

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

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         #app 
10             width: 200px;
11             height: 400px;
12         
13     </style>
14 </head>
15 <body>
16     <div id="app">
17         <div class="out-box">
18             <div class="inner-box">
19                 <div class="container">
20                     <div v-for="i in 100" :key="i"> i </div>
21                 </div>
22             </div>
23         </div>
24     </div>
25     <script src="./vue.min.js"></script>
26     <script>
27         new Vue(
28             el: ‘#app‘
29         )
30     </script>
31 </body>
32 </html>

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

 1 .out-box 
 2     width: 100%;
 3     height: 100%;
 4     position: relative;
 5     overflow: hidden;
 6 
 7 
 8 .inner-box 
 9     width: 100%;
10     height: 100%;
11     position: absolute;
12     padding-right: 17px;
13     padding-bottom: 17px;
14     overflow: auto;
15 

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

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