vue 列表内容自动向上滚动_原生JS实现列表内容自动向上滚动效果

作者：Cpp五条 | 2024-06-10 21:56:37

踩

vue 列表自动向上滚动播报

效果展示

(鼠标移入，滚动停止；鼠标移出，滚动继续)

实现原理

1. html结构：核心是ul > li，ul外层包裹着div。因为想要内容循环滚动无缝衔接，所以在原有ul后面还要有一个一样内容的ul。如下图：

(红色边框为可视区域div，此处为了方便查看效果去除overflow:hidden；)

2. 样式方面：由于要滚动，所以必须2个ul的高度 > 外层可视div高度，且div必须设置overflow：hidden;

代码实现

HTML：

CSS:

* {

margin: 0;

padding: 0;

}

div {

width: 100px;

height: 63px; /* 必须 */

overflow: hidden;/* 必须 */

margin: 50px auto;

border: 1px solid red;

text-align: center;

}

ul {

list-style: none;</

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/700517