随笔记：实现HTML页面局部滚动及自定义滚动条样式

最新推荐文章于 2024-05-16 18:16:14 发布

蜗牛前端攻城狮

最新推荐文章于 2024-05-16 18:16:14 发布

阅读量3.3k

点赞数 3

分类专栏： CSS样式随笔记文章标签：前端 vue javascript

本文链接：https://blog.csdn.net/qq_52320207/article/details/121621136

版权

随笔记同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

CSS样式

3 篇文章 0 订阅

订阅专栏

随笔记：实现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
1. ::-webkit-scrollbar 滚动条整体部分
2. ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
3. ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
4. ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
5. ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
6. ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
7. ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

overflow属性

定义：overflow 属性规定当内容溢出元素框发生的事情
说明：这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

可能的值

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

overflow-x 属性
1. 该属性规定是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话。
overflow-y 属性
1. 该属性规定是否对内容的上/下边缘进行裁剪 - 如果溢出元素内容区域的话。

Never give up and sit down and grieve. Find another way.
敢于另寻出路，永远不要放弃与自怨自艾。

蜗牛前端攻城狮

关注

3
点赞
踩
21

收藏

觉得还不错? 一键收藏
1
评论
随笔记：实现HTML页面局部滚动及自定义滚动条样式

随笔记：实现HTML页面局部滚动及自定义滚动条样式简述 ???? ：今天coding???? ，leader说：“把这个页面的左右两边改成局部滚动”，????那就开干吧。忽然发现，我有点忘了，晚上???? 下了班，那就总结???? 一下吧，加深点记忆???? ，方便下次干活上图 ????Code ✍️<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫