滚动条的隐藏和滚动的实现

本文介绍如何使用CSS隐藏滚动条,并通过JavaScript实现滚动效果。首先,通过CSS选择器将滚动条样式设为不可见;接着,利用内嵌div结构,外层设置overflow属性,内层设置white-space属性,使内容不换行。最后,通过JavaScript控制外层div的scrollLeft属性实现滚动。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

滚动条的隐藏

body::-webkit-scrollbar {
    display: none;
}

将类名换成有滚动条的元素即可,在这里安利一篇文章,讲的蛮详细的。

https://juejin.im/post/5a6046dbf265da3e253c3534

滚动的实现

首先需要两个div嵌套,外层div固定宽度并且设置overflow

overflow:scroll;

内层div自适应宽度,但是需要设置内容不换行

 white-space: nowrap;

内层div中需要滚动的div,这里需要设置为行内块级元素(或者浮动也可以)

display: inline-block;

重点来啦!

这里需要通过JS获得外层div,并且设置它的scrollLeft(切记是外层!!!)

之后通过setInterval就可以实现滚动了,记得要在页面关掉之前清除计时器,不然会出现计时器叠加的问题。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值