怎么用css设置滚动条

怎么用css设置滚动条写后台项目,侧边栏和内容主体部分单独有自己的滚动区域就是自己在自己的区域玩所以需要给侧边栏和内容主体添加自己的滚动条需要一个外层盒子,滚动条才能根据内容滚动<divclass=”scrollbox”>内容部分</div>//用的less写的<style>.scrollbox{height:100%;width:100%;overflow:auto;//滚动条整体部分&::-

大家好,欢迎来到IT知识分享网。

写后台项目,侧边栏和内容主体部分单独有自己的滚动区域–就是自己在自己的区域玩

所以需要给侧边栏和内容主体添加自己的滚动条

需要一个外层盒子,滚动条才能根据内容滚动

<div class="scrollbox">
内容部分
</div>

//用的less写的
<style>
.scrollbox {
    height: 100%;
    width: 100%;
    overflow: auto;
    // 滚动条整体部分
    &::-webkit-scrollbar{
        width: 6px;//对垂直方向滚动条
        height: 6px;//对水平方向滚动条
    }
    //滚动的滑块
    &::-webkit-scrollbar-thumb{
    border-radius:3px;
    background-color: #ccc//滚动条的颜色
    }
    //内层滚动槽
    &::-webkit-scrollbar-track-piece{
    background-color:#ccc ;
    }
}
</style>

最后的效果-简易版滚动条

怎么用css设置滚动条

 下面整理了滚动条常会设置的属性-可以收藏哦

 滚动条整体部分 ,设置水平滚动条的高,垂直滚动条的宽..    ::-webkit-scrollbar

滚动的滑块,设置滚动条的颜色,圆角..    ::-webkit-scrollbar-thumb

内层滚动槽,设置滚动条的颜色,宽度..  ::-webkit-scrollbar-track-piece

外层轨道   ::-webkit-scrollbar-track

边角,滚动条的交汇处    ::-webkit-scrollbar-corner

滚动条两端的按钮,允许通过点击微调小方块的位置..    ::-webkit-scrollbar-button

其他的就要自己去发现了~

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/22131.html

(0)
上一篇 2024-01-10 20:15
下一篇 2024-01-11 10:45

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信