css为盒子设置滚动条&隐藏滚动条

省流:为盒子设置宽高,设置滚动条方向,隐藏滚动条。

首先,要为需要添加滚动条的盒子设置固定的高度和宽度,这样才能让内容超过盒子的边缘。

.box {
	width: 300px;
	height: 300px;
}

然后,给盒子加入overflow属性,该属性控制了当内容超出盒子边界时发生的事情。我们需要添加的是滚动条,因此设置为“scroll”。注意,如果内容没有超过盒子边缘,滚动条是不会出现的。

.box {
	width: 300px;
	height: 300px;
	overflow: scroll;
}

此外,还可以使用“auto”属性值。当内容超出盒子边界时,会出现竖直方向的滚动条。如果内容未超出盒子边界,则不会出现滚动条。如果内容同样超出了盒子的水平范围,那么还会出现一个水平方向的滚动条。

.box {
    width: 300px;
    height: 300px;
	overflow: auto;
}

隐藏滚动条

.box::-webkit-scrollbar {
  display: none;
}
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用CSS属性overflow和::-webkit-scrollbar可以实现滚动条隐藏的效果。其中,::-webkit-scrollbar是一个Webkit私有的伪元素,可以控制浏览器滚动条的样式。下面是一个可以滚动且隐藏滚动条盒子的示例代码: ```html <div style="width: 200px; height: 200px; overflow-y: scroll;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget nunc vitae justo molestie pellentesque. Pellentesque fermentum ut massa at gravida. Integer et dui euismod, egestas ligula ac, viverra quam. Sed auctor, tellus eget bibendum auctor, ligula lorem tristique velit, sed malesuada eros metus in orci. Nulla facilisi. Sed at libero vitae arcu commodo euismod. Sed ac dolor eu sapien ultrices pulvinar.</p> <p>Phasellus tristique massa quis velit porttitor, sit amet pharetra urna vestibulum. Ut sodales massa ut nisi molestie, vel imperdiet mauris cursus. Nulla facilisi. Fusce malesuada enim ut leo tristique, at auctor ex tincidunt. Fusce euismod pellentesque ante, vel pellentesque eros lobortis quis. Nulla facilisi. In tristique tellus vel mauris vulputate, sit amet auctor sapien tincidunt. Curabitur commodo mauris in lacus cursus, et ullamcorper justo tempus. Integer quis sapien vel ipsum finibus egestas eu eu magna.</p> <p>Maecenas euismod, massa vitae sodales convallis, sapien nunc auctor enim, ut dapibus sapien velit eu sapien. Curabitur vel vulputate enim. In elementum est sit amet eros tincidunt, sit amet faucibus nisl tincidunt. Sed vel neque nec libero tristique maximus. Fusce blandit ullamcorper magna, ac tincidunt orci consequat vitae. Sed pharetra tortor a lectus egestas, non elementum velit eleifend. Donec vel mi elit. Donec convallis, orci eu vehicula suscipit, nibh est rutrum arcu, vel laoreet nunc urna in sapien.</p> <p>Aliquam eget feugiat velit. Mauris tincidunt justo at blandit congue. Curabitur fringilla, magna vel maximus scelerisque, augue lacus lacinia diam, a convallis tellus est a sapien. Fusce nec nulla ac odio egestas cursus. Donec sodales magna non elit malesuada, eu dapibus risus iaculis. Morbi auctor lobortis nisi, ac condimentum magna pharetra a. Fusce sed lectus eget massa interdum blandit. Sed vel nunc nec velit venenatis cursus.</p> </div> ``` 接下来,我们在样式表中添加如下样式: ```css div::-webkit-scrollbar { width: 0px; height: 0px; } div::-webkit-scrollbar-thumb { background: transparent; } ``` 在上面的样式中,我们使用::-webkit-scrollbar伪元素来控制滚动条的样式,将滚动条的宽度和高度都设置为0,实现了滚动条隐藏。同时,我们还将滚动条的背景色设置为透明,实现了滚动条的完全隐藏。将上面的样式添加到HTML文件中,即可实现滚动且隐藏滚动条盒子效果。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值