2023年6月20日发(作者：)

Vue⾃定义滚动条盒⼦应⽤开发过程中当web页⾯的内容过多时则会出现滚动条，⽽原⽣的滚动条的样式除了⾕歌浏览器外其他的浏览器都不好修改，于是打算⾃⼰写⼀个容器组件，当内容过多时隐藏默认的滚动条显⽰⾃定义滚动条（只做了垂直滚动条，懒~）先来看看如何引⽤这个滚动盒⼦（hd-scroll，注："hd"是与我相关某个名字的简称）组件，先在app⾥⾯填充100个div：1 然后在把container容器的⼤⼩限制⼀下：1 打开页⾯，可以看到浏览器右边出现了默认的滚动条，⽽且我们添加的div元素也超出了container范围。解决这个问题的⼀般⽅式是在样式⾥⾯添加“overflow:auto”属性，再来看⼀下效果：改善了许多，但是滚动条的样式却不好改变，于是现在引⼊hd-scroll组件： 1 8

9 18

19 在这⾥需要注意的是⽤标签来包裹住⼤量的要渲染的元素，同时删除overflow属性，添加了滚动盒⼦组件后的页⾯看起来或许是这个样⼦的：ps:⿏标的⼩黄点是录频⼯具的，不是页⾯⾃带的。。。滚动盒⼦(hd-scroll)的实现⽅式如下： 1 14

15 104

105 在⾕歌⾥⿏标滚轮事件可使⽤deltaY来控制滚动，不过为了兼容ie，选择了使⽤wheelDelta来代替，它们之间的关系⼤约是wheelDelta == -4 * deltaY。在设置滚动条移动的过程中是通过CSS3属性transform，在低版本ie浏览器中可能⽆法运⾏，可以考虑使⽤来代替，不过看⽹上⼤神们都是通过两个div容器来隐藏主默认的滚动条，实现⽅法如下： 1 2 3 4 5 6 7 Document 8 14 15 16

17
18
19
20
{{ i }}
21
22
23
24
25 26 31 32 先设置好页⾯结构，在这⾥#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 }只需要添加两个盒⼦属性就完成了，很简单吧

2023年6月20日发(作者：)

Vue⾃定义滚动条盒⼦应⽤开发过程中当web页⾯的内容过多时则会出现滚动条，⽽原⽣的滚动条的样式除了⾕歌浏览器外其他的浏览器都不好修改，于是打算⾃⼰写⼀个容器组件，当内容过多时隐藏默认的滚动条显⽰⾃定义滚动条（只做了垂直滚动条，懒~）先来看看如何引⽤这个滚动盒⼦（hd-scroll，注："hd"是与我相关某个名字的简称）组件，先在app⾥⾯填充100个div：1 然后在把container容器的⼤⼩限制⼀下：1 打开页⾯，可以看到浏览器右边出现了默认的滚动条，⽽且我们添加的div元素也超出了container范围。解决这个问题的⼀般⽅式是在样式⾥⾯添加“overflow:auto”属性，再来看⼀下效果：改善了许多，但是滚动条的样式却不好改变，于是现在引⼊hd-scroll组件： 1 8

9 18

19 在这⾥需要注意的是⽤标签来包裹住⼤量的要渲染的元素，同时删除overflow属性，添加了滚动盒⼦组件后的页⾯看起来或许是这个样⼦的：ps:⿏标的⼩黄点是录频⼯具的，不是页⾯⾃带的。。。滚动盒⼦(hd-scroll)的实现⽅式如下： 1 14

15 104

105 在⾕歌⾥⿏标滚轮事件可使⽤deltaY来控制滚动，不过为了兼容ie，选择了使⽤wheelDelta来代替，它们之间的关系⼤约是wheelDelta == -4 * deltaY。在设置滚动条移动的过程中是通过CSS3属性transform，在低版本ie浏览器中可能⽆法运⾏，可以考虑使⽤来代替，不过看⽹上⼤神们都是通过两个div容器来隐藏主默认的滚动条，实现⽅法如下： 1 2 3 4 5 6 7 Document 8 14 15 16

17
18
19
20
{{ i }}
21
22
23
24
25 26 31 32 先设置好页⾯结构，在这⾥#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 }只需要添加两个盒⼦属性就完成了，很简单吧