CSS实现列表滚动效果

这篇具有很好参考价值的文章主要介绍了CSS实现列表滚动效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果:

CSS实现列表滚动效果

应用场景:

 1. 一个竖向列表(或横向列表)中有很多行,但是随着页面上下(或左右)滑动,整个列表会随之移动。

2.三级联动菜单,上下滑动的时候。

诸如此类...

在这里介绍一个css属性,overflow-y和overflow-x

以以下代码为例:

<!DOCTYPE html>
<html>
	<head>
		<style>
			div{
				height: 450px;
				overflow-y: scroll;
			}
		</style>
	</head>
	<body>
		<div>
			<p>列表1</p><p>列表2</p><p>列表3</p><p>列表4</p><p>列表5</p><p>列表6</p><p>列表7</p><p>列表8</p><p>列表9</p><p>列表10</p><p>列表11</p><p>列表12</p><p>列表13</p><p>列表14</p><p>列表15</p><p>列表16</p><p>列表17</p><p>列表18</p><p>列表19</p><p>列表20</p><p>列表21</p><p>列表22</p><p>列表23</p><p>列表24</p><p>列表25</p><p>列表26</p><p>列表27</p><p>列表28</p><p>列表29</p><p>列表30</p>
		</div>
	</body>
</html>

关于overflow-y:

当一个块级元素(div 元素、p 元素之类的)的内容在垂直方向发生溢出时,CSS属性 overflow-y决定如何处理溢出的内容。

隐藏溢出内容(hidden),或者显示滚动条(scroll),或者直接显示溢出内容(visible),或者让浏览器来处理(auto)。

关于overflow-x:

当一个块级元素的内容在水平方向发生溢出时,CSS属性 overflow-x 决定应该截断溢出内容,或者显示滚动条,或者直接显示溢出内容。

值得一提的是,滚动的元素不可以浮动,但我们可以给滚动列表的这个大元素设置

overflow:hidden;

white-space:nowrap;

overflow-x: scroll;

避免出现设置好一切后,滚动无效的情况文章来源地址https://www.toymoban.com/news/detail-451214.html

到了这里,关于CSS实现列表滚动效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Css实现浏览滚动条效果

    也是有大半个月没有更新文章了,大部分时间都在玩,然后就是入职的事。今天就更新一个小知识,刷抖音的时候看到的,感觉还不错。 关键属性animation-timeline:动画名称; 用于控制动画的时间轴。它可以让你在一个元素上同时播放多个动画,控制它们的开始时间和持续时间,

    2024年02月08日
    浏览(38)
  • 实现对一个元素的滚动条进行平滑滚动至顶部的动画效果

    1.elementUI中的平滑滚动至顶部的动画效果代码 2.将上面的代码简化 3.继续简化代码 使用 Element.scrollTo 方法并使用 scroll-behavior: smooth 的简化代码示例: 首先,在你的CSS样式表中加入以下代码: 这会将平滑滚动的效果应用到整个页面。 然后,使用 scrollTo 方法在JavaScript中触发滚

    2024年02月11日
    浏览(40)
  • vue 实现钉钉官网的轮播图下面功能滚动排版CSS效果

    前言 最近在写PC端的业主端时候,发现传统的菜单栏比较丑,也不符合实际应用(功能页面并不多-展示为主) 偶然发现钉钉官网的效果挺有意思的,想着把这个效果复原过来,然后夸夸搜索了一番。 经过一顿的cv打法,加上修修补补把大概的效果整了出来,时间关系最基础

    2024年02月11日
    浏览(49)
  • CSS实现一个交互感不错的卡片列表

    横向滚动 鼠标悬停时突出显示 默认堆叠展示 鼠标悬停时,完整展示当前块+适当旋出效果 移动端样式优化、磁吸效果 美化滚动条 flex 布局 css 简单变换+过渡 transform、transition 渐变色函数 linear-gradient … 伪类、伪元素 滚动条、::after、 ::before …

    2024年02月11日
    浏览(37)
  • 如何使用CSS实现一个平滑过渡效果?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月12日
    浏览(43)
  • 使用css3如何实现一个文字打印效果

    在很多网站首页介绍页里,为了吸引用户,暂留更长时间,使用了一些css3动画的 文字打印.gif 想要实现这个动画,改变元素的宽度,结合动画css3关键帧实现 animation 动画通过设置多个节点来精确控制一个或者一组动画,常用来实现复杂的动画效果; 相对过渡动画, animation 动画可以

    2024年02月16日
    浏览(88)
  • 如何使用CSS实现一个拖拽排序效果?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月11日
    浏览(41)
  • 如何使用CSS实现一个带有动画效果的进度条?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月11日
    浏览(58)
  • HTML+JS+CSS歌词滚动效果

    这些代码主要实现了歌词的初始化、显示和随音频播放的同步滚动。其中, initWords 函数用于将歌词字符串解析成数据数组, parseTime 函数用于将时间字符串转换为秒数。通过 setOffset 函数实现歌词的滚动和高亮显示。最后,添加了一个滚动事件监听器,以便用户通过滚动调整

    2024年01月17日
    浏览(45)
  • 【css面试题】 实现一个盒子的水平竖直居中对齐效果

    面试题里有时还会强调 子盒子宽高是否已知,要注意一下 失败,只能水平居中,垂直不可以!!!!!!! 原因 http://t.csdn.cn/AOMJ1 http://t.csdn.cn/cFsg6 margin:auto是具有强烈计算意味的,用来计算元素对应方向上应该获得的 剩余空间 大小。 行内元素margin:auto; 不能水平居

    2024年02月09日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包