设置局部滚动条

在很多时候当设置的某些内容超出一定范围的时候会出现全局滚动条,但我们有时候需要的是局部出现滚动条而不是全局出现滚动条,所以在这个时候我们需要给特定的盒子设置局部滚动条。在给盒子设置局部滚动条时如果需要Y轴出现滚动条就需要给它设置固定的高度,同样的如果需要X轴出现滚动条则需要给盒子设置固定的宽度,设置高度时可以直接设置成固定像素也可以设置可以视区域的百分比。
在这里插入图片描述
如上图,设置了固定的像素高度和只在盒子的Y轴出现局部滚动条。
overflow-y 为在Y轴出现滚动条 overflow-x 为在X轴出现滚动条 如果直接设置 overflow 则X轴和Y轴都出现滚动条。 设置 auto 为当内容超出给定的宽度或者高度时才出现滚动条,如果不超出则不出现,如果设置为 scroll 即无论内容超不超出给定的范围都出现滚动条,设置为 hidden 则是不出现滚动条且出内容隐藏,还有其他属性值,不过基本用不上。 上图给盒子设置的滚动条效果如下:
在这里插入图片描述
觉得滚动条样式不好看还可以给滚动条设置样式。

/*设置滚动条滑块的宽高*/
        ::-webkit-scrollbar {
            width: 10px; 
            height: 10px; 
         }
         /*定义滚动条的轨道颜色、内阴影及圆角*/
         ::-webkit-scrollbar-track{
             background-color: transparent;/*颜色*/
             -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);/*内阴影*/
             border-radius: 3px;/*圆角*/
         }
        /*设置滑块颜色、内阴影及圆角*/
         ::-webkit-scrollbar-thumb{
             -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);/*内阴影*/
             background-color: transparent;/*颜色*/
             border-radius: 7px;/*圆角*/
         }
         /*设置两端按钮的样式*/
         ::-webkit-scrollbar-button {
             background-color:transparent; /*颜色*/
         }
         /*设置右下角交点的样式*/
        ::-webkit-scrollbar-corner {
             background:transparent; /*颜色*/
         }
在这里插入代码片

设置好样式的效果如下,因为将滚动条的颜色设置成了透明色所以在有背景时会不明显,所以在有背景的情况下推荐将滚动条设置为透明色。
在这里插入图片描述

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值