随笔记&＃xff1a;实现HTML页面局部滚动及自定义滚动条样式
简述 &＃x1f399; &＃xff1a;今天coding&＃x1f477; &＃xff0c;leader说&＃xff1a;“把这个页面的左右两边改成局部滚动”&＃xff0c;&＃x1f197;那就开干吧。忽然发现&＃xff0c;我有点忘了&＃xff0c;晚上&＃x1f303; 下了班&＃xff0c;那就总结&＃x1f4d6; 一下吧&＃xff0c;加深点记忆&＃x1f914; &＃xff0c;方便下次干活
-
上图 &＃x1f5bc;
-
Code ✍️
-
<!DOCTYPE html>
<html lang&＃61;"en"><head><meta charset&＃61;"UTF-8"><meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"IE&＃61;edge"><meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;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: 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;}.left::-webkit-scrollbar-thumb:hover {background-color: hotpink;}.right::-webkit-scrollbar-thumb:hover {background-color: red;}</style>
</head><body><div class&＃61;"wrap"><div class&＃61;"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&＃61;"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>
-
上面的代码直接复制粘贴出去就可以运行&＃xff01;&＃xff01;
-
Knowledge point
- ::-webkit-scrollbar 滚动条整体部分
- ::-webkit-scrollbar-thumb 滚动条里面的小方块&＃xff0c;能向上向下移动&＃xff08;或往左往右移动&＃xff0c;取决于是垂直滚动条还是水平滚动条&＃xff09;
- ::-webkit-scrollbar-track 滚动条的轨道&＃xff08;里面装有Thumb&＃xff09;
- ::-webkit-scrollbar-button 滚动条的轨道的两端按钮&＃xff0c;允许通过点击微调小方块的位置。
- ::-webkit-scrollbar-track-piece 内层轨道&＃xff0c;滚动条中间部分&＃xff08;除去&＃xff09;
- ::-webkit-scrollbar-corner 边角&＃xff0c;即两个滚动条的交汇处
- ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
-
overflow属性
-
定义&＃xff1a;overflow 属性规定当内容溢出元素框发生的事情
-
说明&＃xff1a;这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll&＃xff0c;不论是否需要&＃xff0c;用户代理都会提供一种滚动机制。因此&＃xff0c;有可能即使元素框中可以放下所有内容也会出现滚动条。
-
可能的值
-
| 值 | 描述 |
|---|
| visible | 默认值。内容不会被修剪&＃xff0c;会呈现在元素框之外。 |
| hidden | 内容会被修剪&＃xff0c;并且其余内容是不可见的。 |
| scroll | 内容会被修剪&＃xff0c;但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪&＃xff0c;则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
-
overflow-x 属性
- 该属性规定是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话。
-
overflow-y 属性
- 该属性规定是否对内容的上/下边缘进行裁剪 - 如果溢出元素内容区域的话。
Never give up and sit down and grieve. Find another way.
敢于另寻出路&＃xff0c;永远不要放弃与自怨自艾。
京公网安备 11010802041100号