随笔记：实现HTML页面局部滚动及自定义滚动条样式
简述 🎙 ：今天coding👷 ，leader说：“把这个页面的左右两边改成局部滚动”，🆗那就开干吧。忽然发现，我有点忘了，晚上🌃 下了班，那就总结📖 一下吧，加深点记忆🤔 ，方便下次干活
上图 🖼
Code ✍️
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>//初始化样式* {margin: 0;padding: 0;}.wrap {display: flex;position: absolute;height: 100%;width: 100%;}p {text-align: center;}.left {width: 30%;height: 50%;background-color: pink;overflow: auto;}.right {width: 70%;height: 80%;background-color: plum;overflow: auto;}/* 修改滚动条样式 */.left::-webkit-scrollbar {/* width height分别对应竖向滚动条和横向滚动条*/width: 5px;height: 5px;background-color: #ffffff;}.right::-webkit-scrollbar {width: 20px;height: 20px;background-color: #ffffff;}/* 修改滚动条中的小滑块 */.left::-webkit-scrollbar-thumb {width: 10px;border-radius: 5px;background-color: royalblue;}.right::-webkit-scrollbar-thumb {width: 10px;border-radius: 5px;background-color: royalblue;}/* 定义滚动条的轨道 */.left::-webkit-scrollbar-track {background-color: red;}.right::-webkit-scrollbar-track {background-color: greenyellow;}/* 定义轨道两端的按钮 */.left::-webkit-scrollbar-button {background-color: green;}.right::-webkit-scrollbar-button {background-color: hotpink;}/*给小滑块添加hover事件，鼠标悬浮在滑块上面的样式 */.left::-webkit-scrollbar-thumb:hover {background-color: hotpink;}.right::-webkit-scrollbar-thumb:hover {background-color: red;}</style></head><body><div class="wrap"><div class="left"><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div><div class="right"><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p></div></div></body></html>
上面的代码直接复制粘贴出去就可以运行！！
Knowledge point
::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件overflow属性
定义：overflow 属性规定当内容溢出元素框发生的事情
说明：这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
可能的值
overflow-x 属性
该属性规定是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话。
overflow-y 属性
该属性规定是否对内容的上/下边缘进行裁剪 - 如果溢出元素内容区域的话。
Never give up and sit down and grieve. Find another way.
敢于另寻出路，永远不要放弃与自怨自艾。
