实现一个div容器带横向/竖向滚动效果

最新推荐文章于 2024-05-30 18:55:27 发布

sinJack

最新推荐文章于 2024-05-30 18:55:27 发布

阅读量3.3w

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css js

本文链接：https://blog.csdn.net/qq_40693603/article/details/106901863

前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用CSS的overflow和white-space属性实现网页元素的竖向和横向滚动效果。通过设置div元素的样式，可以轻松创建自定义滚动区域，适用于各种布局需求。

主要代码如下：

<!-- 只使用overflow属性，实现竖向滚动效果。同时使用overflow属性和white-space属性实现横向滚动效果 -->
 <div id="imgs" style="border: 1px solid black;width: 345px;height: 120px;overflow:scroll;white-space: nowrap;">
 </div>

需要掌握overflow属性和white-space属性。
1、overflow样式属性：

2、white-space样式属性：
在这里插入图片描述