用CSS3写一个无限滚动列表的思路和方法是什么
Admin 2022-06-10 群英技术资讯 468 次浏览
效果预览
思路
将当前列表滚动至最后一项的末尾,然后瞬间切换回第一项
问题点
1.用什么方式实现无限轮播
这个问题就是列表滚动到最后时底部会留白(有多余空间)如何处理?
在列表的最后添加列表开头的重复项即可(如图中的10后面出现的1,2,3,4,5既为重复项)。
重复项添加的数目要根据当前列表的高度和列表项的高度一起确定,例如:
列表高度150px
,列表项高度30px
,则需要在当前列表尾部添加150 / 30 = 5
项重复项才可以去除留白。
2.如何让用户无感知的切换回第一项
添加好重复项之后控制好切换时机,当列表滚动到最后一项的末尾(重复项第一项的开头)时,立即进行切换。例如:
列表项共10
项,则让列表向上移动到10 * 30px = 300px
时立即进行切换即可实现无感知切换
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表无限滚动</title> </head> <style> .container { position: relative; background-color: #a4ffcc; /* 父容器需要有明确的高度 */ height: 150px; width: 200px; margin: auto; overflow: hidden; } .container > .scroll-list { position: absolute; top: 0; left: 0; width: 100%; animation: scroll 6s linear infinite normal; } .container > .scroll-list > div { width: 100%; /* 滚动的项目需要有具体的高度 */ height: 30px; background-color: #1ea7ff; display: flex; justify-content: center; align-items: center; color: white; } .container > .scroll-list > div:nth-child(2n) { background-color: #18d9f8; } @keyframes scroll { 100% { /* 需要滚动内容的总高度 */ top: -300px; } } </style> <body> <div class="container"> <div class="scroll-list"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <!-- 下面代码是为了让滚动内容能够多展示一屏(去除留白/无限轮播):数量请自行根据高度进行计算 --> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </div> </body> </html>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章主要介绍了CSS3实现缺角矩形,折角矩形以及缺角边框,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
有时候我们需要在网站上的边栏上放一个客户帮助的表单,开始是放一个按钮在那里,点击之后滑出内容来,一般这种效果我们会用js来控制。现在CSS3也可以做到了哦。这个是怎么做到的呢?那就要用到CSS3里面的:target这个标签了。之前我也写过相类似用到:target的动画。比如:CSS3手风琴的两种制作方案超酷的CSS3幻灯片效果下面 ...
这篇文章主要介绍了如何让你的html button本身居中的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
这篇文章主要介绍了Html5原生拖拽相关事件简介以及基础实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008