关键词：
文章目录
概述
我们在写 web 页面的时候，除了页面原生的滚动条，比如 HTML 的滚动条，BODY 的滚动条之外，还有一种比较常见的滚动条，那就是元素内部滚动条，我们在利用元素内部滚动条的时候会遇到什么问题呢，我们如何自定义滚动条。
元素圆角与滚动条
比如迅雷客户端，除了最右边的滚动条是页面滚动条，其他两个都是元素内部滚动条。
在面板区域，我们的内部滚动条，因为外部元素的圆角给裁剪掉了，这在视觉上是不行的，那我们想办法解决。
方案一
给这个元素添加一个 margin 让元素与底部有一定距离，这个距离我们认为是圆角的大小，即能解决问题，但是这也会造成元素底部一直有空隙，而不是一个完整的可滚动区域，视觉体验上还是欠佳。
方案二
想到原生滚动条上下有两个箭头，那我们是不是可以把这个箭头改造一下，让它的高度等于圆角的大小，同时透明不可见呢，这样我们就实现了滚动条距离底部有一定距离，不会被外部圆角所裁剪，也能保证完整的滚动区域，保证用户体验。
这是 Chrome 默认的滚动条样式，当然我们还应该知道，滚动条应该四个箭头，上面两个，下面两个，都是用来自增或自减的。
方案实现
自定义滚动条，我们平时用的多的可能是自定义滚动条的轨道，颜色，大小等，但上下箭头一般是隐藏的，所以我们需要去查一下浏览器对于滚动条有哪些CSS选择器
::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).
除了常用的 ::-webkit-scrollbar、::-webkit-scrollbar-thumb、::-webkit-scrollbar-track 之外，我们还找到了我们想要的选择器 ::-webkit-scrollbar-button
我们只需要将滚动条四个箭头隐藏三个就行，先认识一下这些选择器
// 滚动条所有箭头按钮
::-webkit-scrollbar-button
// 垂直方向的滚动条箭头
::-webkit-scrollbar-button:vertical
// 垂直滚动条上方箭头
::-webkit-scrollbar-button:vertical:start
// 垂直滚动条上方渐箭头
::-webkit-scrollbar-button:vertical:start:increment
// 垂直滚动条上方渐减箭头
::-webkit-scrollbar-button:vertical:start:decrement
// 垂直滚动条下方箭头
::-webkit-scrollbar-button:vertical:end
// 垂直滚动条下方渐增箭头
::-webkit-scrollbar-button:vertical:end:increment
// 垂直滚动条下方渐减箭头
::-webkit-scrollbar-button:vertical:end:decrement
代码实现：
// 隐藏所有箭头按钮
::-webkit-scrollbar-button
display: none;
// 垂直滚动条下方渐增或渐减箭头显示其一
::-webkit-scrollbar-button:vertical:end:increment
display: block;
height: 5px;
background-color: transparent;
最终效果：
自定义滚动条扩展
参考：https://www.cnblogs.com/rubylouvre/archive/2011/03/01/1968057.html
<!doctype html>
<html>
<head>
<title>自定义滚动条</title>
</head>
<body>
<style>
/* Turn on a 13x13 scrollbar */
::-webkit-scrollbar
width: 13px;/*对垂直流动条有效*/
height: 13px;/*对水平流动条有效*/
/*垂直滚动条的按钮*/
::-webkit-scrollbar-button:vertical
background-color: red;
border: 1px dashed blue;
/*CSS的坐标系，左上角为(0,0),往右往下为增加，往上往左为减少*/
/*显示滚动条上方的渐增按钮*/
::-webkit-scrollbar-button:start:decrement,
/*显示滚动条上方的渐减按钮*/
::-webkit-scrollbar-button:end:increment
display: block
/*隐藏滚动条上方的渐增按钮*/
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement
display: none;
/* 定义垂直滚动条渐增按扭的样式 */
::-webkit-scrollbar-button:vertical:increment
background-color: white;
border: 1px dashed blue;
/* 定义垂直滚动条渐减按扭的样式 */
::-webkit-scrollbar-button:vertical:decrement
background-color: purple;
border: 1px dashed blue;
/* scrollbar-track 上面是 scrollbar-track-piece */
/* scrollbar-track-piece 上面是 四个按扭与scrollbar-track-piece:start与scrollbar-track-piece:end与scrollbar-thumb */
/* 垂直滚动条的第一层轨道*/
::-webkit-scrollbar-track:vertical
background-color: blue;
border: 1px dashed pink;
/* 垂直滚动条的第二层轨道 */
::-webkit-scrollbar-track-piece
background-color: green;
/* 垂直滚动条的第三层轨道的上段 */
::-webkit-scrollbar-track-piece:vertical:start
border: 1px solid #000;
/* 垂直滚动条的第三层轨道的下段 */
::-webkit-scrollbar-track-piece:vertical:end
border: 1px dashed pink;
/* 垂直滚动条的滑动块 */
::-webkit-scrollbar-thumb:vertical
height: 50px;
background-color: yellow;
/* Corner */
::-webkit-scrollbar-corner:vertical
background-color: black;
/* http://www.cssportal.com/css-properties/resize.htm */
/* Resizer */
::-webkit-scrollbar-resizer:vertical
background-color:orange;
</style>
<div style="width:200px;height: 200px;overflow: scroll;resize:both;">
<div style="background: red;width:400px;height: 400px;"></div>
</div>
</body>
</html>
遗留问题
目前我还有一个疑问就是，内部滚动条，默认都是贴边的，这在一定程度上是不满足视觉要求的，操作起来也不是很好，因为我们自定义滚动条一般定义的不会很宽。
当然通过多一层容器包裹，外层容器首先就有一个margin，里面的滚动条自然会与边界有边距，这是目前我所采用的方案，期待有更好的解决办法。
产生垂直滚动条的三个因素和修改滚动条的样式(代码片段)
...天我就遇见了。此时你去逐级去检查hidden-ovflow-box的父级元素是否设置了高度100%还有一个点height:calc(100%-179px);这个动态计算的高度一定要准确。否者这个跟这个同级的下一个元素会出问题。问题是：滚动条区域里面的元素等级比... 查看详情
flex布局滚动条失效(代码片段)
flex布局中，父元素：parent:display:flex;子元素：child:flex:1;overflow:auto;子元素默认占满父元素；子元素内容超过后，没有出现滚动条；子元素：child:flex:1;overflow:auto;width:0;//横向需要滚动条的话height:0;//纵向需要滚动条的话 查看详情
jquery之_元素滚动(代码片段)
对应的知识点铺垫，但是有一个很重要的问题就是兼容IE和chorme的1.scrollTop():读取/设置滚动条的Y坐标2.$(document.body).scrollTop()+$(document.documentElement).scrollTop()读取页面滚动条的Y坐标(兼容chrome和IE)3.$(‘body,html‘).scrollTop(60);滚动到指... 查看详情
qt编程，如何用代码实现qtablewidget中滚动条的移动
...alScrollBar->setValue(row++);连接。提示没有erticalScrollBar这个元素，应该怎么做，谢谢！ 参考技术C添加一句：#include<QScrollBar> 查看详情
jquery：实现图片按需加载的方法，当要显示内容的高度超过了页面的高度，按需加载，根据滚动条的位置来判断页面显示的内容(代码片段)
...，则重新加载图片知识点：1.offset()方法返回或设置匹配元素相对于文档的偏移（位置）返回第一个匹配元素的偏移坐标。该方法返回的对象包含两个整型属性：top和left，以像素计。此方法只对可见元素有效。2.scrollTop()：方法返... 查看详情
前端（浏览器兼容性ie与chrome）之滚动条的隐藏(代码片段)
...发时，可能会有为了保持网站的美观和整洁性而想要隐藏滚动条的想法。在最近的网站开发过程中，我就曾碰到过这个问题。针对这个问题也进行了相应的研究学习，整理了如下的几个思路：一、使用CSS样式来解决（Chrome浏览器... 查看详情
2019-11-29-win10-uwp-如何判断一个控件在滚动条的里面是用户可见(代码片段)
...1-2908:42:36+08002019-04-2910:15:38+0800Win10UWP在UWP中如何知道一个元素是在滚动条的显示大小内用户可以看到这个 查看详情
圆角矩形精度条(代码片段)
publicclassDownProgressBarextendsView/***注意：*1，整个精度条的宽度MaxProgress;*2,当前精度条的宽度currentProgress;*4,背景颜色*5，进度颜色*6，文字，文字颜色，大小**@paramcontext*/privateintmMaxProgress;privateintmProgress;privateintmBackgro 查看详情
实例总结fixed定位元素内部滚动显示(代码片段)
布局如下：灰色div是grayBox粉色div是pinkBox绿色div是greenBox1.grayBox2position:fixed;3top:0;4right:0;5width:430px;6height:100%;7transition:all.3s;8z-index:99;910.pinkBox11width:20px;12left:0;13position:absolute;1 查看详情
更改滚动条样式(代码片段)
/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/::-webkit-scrollbarwidth:16px;height:16px;background-color:#113b9f;/*定义滚动条轨道内阴影+圆角*/::-webkit-scrollbar-track//-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);background-co 查看详情
csswebkit滚动条的主题词(代码片段)
mcustomscrollbar滚动条的使用(代码片段)
前两天需要设置滚动条的样式，一开始我以为只是用css设置就可以了，嗯，果然还是想的很简单，虽然可以在css设置滚动条样式，但是只是在火狐，IE浏览器上根本就不能用，所以只能使用js插件来设置滚动条的属性。从网上查... 查看详情
关于滚动条的操作(代码片段)
...的内容可视区域的宽度，即clientWidth=width+padding，不包括滚动条。clientHeight：获取对象的内容可视区域的高度，即clientHeight=height+padding，不包括滚动条。scrollWidth：获 查看详情
css3自定义滚动条的颜色等样式-hover显示切换-伪类::-webkit-scrollbar的样式控制(代码片段)
效果默认不显示横向的滚动条：鼠标hover时，显示浅色、带圆角的滚动条：实现代码HTML<navclass="xx-wrapper"><divclass="navnav-tabsxx"role="tablist"><aclass="nav- 查看详情
css3自定义滚动条的颜色等样式-hover显示切换-伪类::-webkit-scrollbar的样式控制(代码片段)
效果默认不显示横向的滚动条：鼠标hover时，显示浅色、带圆角的滚动条：实现代码HTML<navclass="xx-wrapper"><divclass="navnav-tabsxx"role="tablist"><aclass="nav- 查看详情
滚动条出现挤压页面宽度，影响布局(代码片段)
...lc(100%-100vw)100vw相对于浏览器的window.innerWidth，是浏览器的内部宽度，注意，滚动条宽度也计算在内！而100%是可用宽度，是不含滚动条的宽度。没有滚动条的时候，相当于margin-right:0，没什么影响；有滚动条的时候就相当于margin-ri... 查看详情
显示一个带滚动条的窗口(代码片段)
1//main.c2#include<windows.h>3#include"sysmets.h"45LRESULTCALLBACKWndProc(HWND,UINT,WPARAM,LPARAM);67intWINAPIWinMain(HINSTANCEhInstance,HINSTANCEhPrevInstance,PSTRszCmdLine,intiCmdShow)89stati 查看详情
解决滚动条加载出现的页面抖动(代码片段)
...lc(100vw-100%)100vw相对于浏览器的window.innerWidth，是浏览器的内部宽度，注意，滚动条宽度也计算在内！而100%是可用宽度，是不含滚动条的宽度。calc()为计算方法解决抖动可以根据是否有有滚动条进行不同的左右宽度计算：style="... 查看详情