js中奖人员向上滚动或者文章标题向上滚动无缝衔接

效果：

代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.container {width: 400px;height: 200px;border: 1px solid red;overflow: hidden;float: left;}.container .listItem {height: 30px;margin-top: 15px;background-color: #00FF00;line-height: 30px;}.listItem:first-child {margin-top: 0;margin-left: 0;}</style></head><body><div class="container"><div class="listItem">1</div><div class="listItem">2</div><div class="listItem">3</div><div class="listItem">4</div><div class="listItem">5</div><div class="listItem">6</div><div class="listItem">7</div><div class="listItem">8</div><div class="listItem">9</div><div class="listItem">10</div></div><script type="text/javascript">// 使用滚动const wrap = document.querySelector(".containerTwo");scrollLeft(wrap);// wrap为dom元素function scrollVertical(wrap){let interval = null;const children = wrap.children;const wrapHeight = wrap.clientHeight;const scrollHeight = wrap.scrollHeight;if (wrapHeight < scrollHeight) {if (interval) {clearInterval(interval);}interval = setInterval(() => {// 速度和滚动距离可以自己调wrap.scrollTop += 1;if (wrap.scrollTop + wrapHeight >= scrollHeight) {const child = children[0];wrap.append(child);}}, 50)}};</script></body>
</html>

本来想把向左滚动的也加上，但是把相应的clientHeight换成clientWidth、把scrollHeight换成scrollWidth、把scrollTop换成scrollLeft后，发现只有第一轮可以，第二轮就不行了，一直找不到原因，就先放着了。

有哪位大神如果知道原因，希望能评论下！！！

js中奖人员向上滚动或者文章标题向上滚动无缝衔接相关推荐

原生js进阶版轮播图实现(走马灯效果，无缝衔接)
原生js进阶版轮播图实现(走马灯效果,无缝衔接) 利用原生js手写一个轮播图,是上一篇文章的简易版的一个进阶,本次轮播图主要是利用定位和定时器实现了走马灯效果,并且是左右轮播.实现过程与代码也是很简单 ...
仿造小红书页面代码html,jQuery仿小红书登录页，背景图垂直循环滚动登录页，向上循环滚动的动画，实现一张背景图片的无缝向上循环js滚动...
jQuery仿小红书登录页,背景图垂直循环滚动登录页,向上循环滚动的动画,实现一张背景图片的无缝向上循环js滚动先看效果图: 图片是gif看着有点卡顿,网页里面其实很流畅的此代码使用CSS3动画实 ...
php滚动窗口多条动态,详解原生JS是实现控制多个滚动条同步跟随滚动
本文主要和大家详解详解原生JS是实现控制多个滚动条同步跟随滚动,当这两个容器元素的内容都超出了容器高度,即都出现了滚动框的时候,如何在其中一个容器元素滚动时,让另外一个元素也随之滚动. 在一些支持用 ...
html js 禁用浏览器上下滑动,纯JS阻止浏览器默认滚动事件，实现自定义滚动方法...
首先该方法兼容IE7+以上浏览器,可以实现页面上下滚动,而且也可以实现页面左右滚动,每次滚动的距离为屏幕的大小,滚动为加速滚动 javaScript代码如下: //滚动实现方法,使用鼠标滚轮每次滚动浏 ...
vue：实现锚点双向滚动/文章章节联动滚动效果
需求描述需要实现类似doc中文档大纲的效果,点击对应章节的名称时定位到相应的正文:而当正文滚动时,高亮显示对应的章节名称实现思路其实笔者一开始想到的是利用a标签页内跳转(也就是"锚点& ...
Web前端开发人员和设计师必读文章推荐【系列七】
这篇文章主要收录了十二月份发布在梦想天空的优秀文章,特别推荐给Web开发人员和设计师阅读.梦天空博客关注前端开发技术,展示最新 HTML5 和 CSS3 技术应用,分享实用的 jQuery 插件,推荐 ...
Web前端开发人员和设计师必读文章推荐【系列九】
这篇文章主要收录了最近两个个月发布在梦想天空的优秀文章,特别推荐给 Web 开发人员和设计师阅读.梦天空博客关注前端开发技术,展示最新 HTML5 和 CSS3 技术应用,分享实用的 jQuery ...
外贸网络推广分享让网站文章标题优化效果更好地小技巧！
在外贸网络推广网站优化过程中,对于文章优化来说,网站的标题优化是非常重要的,一个好的文章标题不仅能帮助网站吸引到更多的流量,还能给搜索引擎带来更多的流量, 那么外贸网络推广对于文章标题该如何撰写才能更 ...
文章标题对网站优化有什么影响？
众所周知,网站在进行优化的过程中,文章的内容对网站的优化有着非常重要的作用,网站排名靠前,一定离不开有高质量文章内容的支持.那么在文章内容的更新中,文章标题对网站优化来说都有哪些影响呢? 一.文章的标 ...

js中奖人员向上滚动或者文章标题向上滚动无缝衔接

js中奖人员向上滚动或者文章标题向上滚动无缝衔接相关推荐

最新文章

热门文章

js中奖人员向上滚动或者文章标题向上滚动 无缝衔接

js中奖人员向上滚动或者文章标题向上滚动 无缝衔接相关推荐

最新文章

热门文章

js中奖人员向上滚动或者文章标题向上滚动无缝衔接

js中奖人员向上滚动或者文章标题向上滚动无缝衔接相关推荐