关于滚动条的设置

最新推荐文章于 2023-12-05 14:37:18 发布

AmberWu

最新推荐文章于 2023-12-05 14:37:18 发布

阅读量4.9k

点赞数 1

分类专栏：技术类文章标签： css

本文链接：https://blog.csdn.net/AmberWu/article/details/72848204

版权

技术类专栏收录该内容

68 篇文章 1 订阅

订阅专栏

今天写页面的时候，遇到了一个加滚动条的，实际上用css就能很简单地实现这个功能，我找了一些资料，想看看有没有别的办法。

先看最简单的实现：

用vue做了一个for循环，列出了一些li：

<div class="wrap" id="example">
    <ul>
        <li v-for="item in list">{{item}}</li>
    </ul>
</div>
<script>
    var vm = new Vue({
        el: '#example',
        data: {
            list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]
        }
    })
</script>

css要给wrap限宽高：

  .wrap {
            width: 200px;
            height: 300px;
            border: 1px solid;
        }

所以就有了最初的内容溢出容器的样式：
这里写图片描述

给wrap设置overflow属性：

    overflow-y: scroll;
    overflow-x: hidden;

就可以实现在竖直方向使用滚动条，在水平方向不使用滚动条。
这里写图片描述

我们来进一步了解overflow属性：
overflow 属性规定当内容溢出元素框时发生的事情。现在所有浏览器都支持overflow属性，但是所有的IE浏览器都不支持overflow的inherit值。

当设置overflow属性为srcoll值时，会默认加滚动条，即使容器的内容远远少于容器的大小，也就是容器能放得下内容。

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

如果嫌原生的样式丑，我们也可以用css来修改样式：

        ::-webkit-scrollbar {
                width: 14px;
            }

        ::-webkit-scrollbar-track {
            background-color: #bee1eb;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #00aff0;
        }

        ::-webkit-scrollbar-thumb:hover {
            background-color: #9c3
        }

        ::-webkit-scrollbar-thumb:active {
            background-color: #00aff0
        }