关于滚动条的设置

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/AmberWu/article/details/72848204

今天写页面的时候,遇到了一个加滚动条的,实际上用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
        }

这样就得到了带样式的滚动条:
这里写图片描述

展开阅读全文

没有更多推荐了,返回首页