setInterval -- 间隔执行函数;element.scrollTop -- 元素滚动条距头部的距离;

因为执行代码需要时间,所以最终动态时间会比设置的要慢

    var slide = new Slide({
id:'grid-body',//元素ID
onceHeight:43,//每行高度
onceTime:500,//滑动一次用时毫秒
wait:1500//滑动后停顿毫秒
});
slide.start();
function Slide(options){
this.element = document.getElementById(options.id); //元素
this.onceHeight = options.onceHeight || 40;//滚动距离
this.onceTime = options.onceTime || 200;//滚动一次需要的时间
this.wait = options.wait || 1000;//等待时长(滚动一次后多久滚动下一次 单位:毫秒)
this.frame = 1;//帧数
this.frequency = this.onceTime / (this.onceHeight / this.frame);
this.waitPoint = this.onceTime / this.frequency;
this.coming = this.waitPoint + this.wait / this.frequency;
this.prevFrame = this.element.scrollHeight / (this.onceTime / this.frequency);
this.start = function(){
let _this=this, j=this.waitPoint, isPrev=false;
setInterval(function(){
if(isPrev){//滚回顶部
_this.element.scrollTop -= _this.prevFrame;
//判断是否滚动到顶部;
if(_this.element.scrollTop <= 0){
//开始往下滑动
isPrev = false;
//准备等待
j = _this.waitPoint;
}
}else{
j++;
//等待结束
if(j >= _this.coming){
//准备滑动
j = 0;
//判断是否滚动到底部;
if(_this.element.scrollTop + _this.element.clientHeight >= _this.element.scrollHeight){
//开始往上滑动
isPrev = true;return;
}
}
//等待……
if(j >= _this.waitPoint)return;
//设置滚动条到顶部距离
_this.element.scrollTop += _this.frame;
}
},this.frequency);
}
}

JS DIV列表自动滚动带停顿,滚动到底部后自动滚动到顶部的更多相关文章

  1. 带左右箭头切换的自动滚动图片JS特效

    效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  2. jQuery带控制按钮向上和向下滚动文本列表

    效果:http://hovertree.com/texiao/jquery/64/ 效果图如下: 代码如下: <!DOCTYPE html> <html> <head&g ...

  3. js监听网页页面滑动滚动事件,实现导航栏自动显示或隐藏

    /** * 页面滑动滚动事件 * @param e *///0为隐藏,1为显示var s = 1;function scrollFunc(e) { // e存在就用e不存在就用windon.event ...

  4. jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 基于JQuery实现滚动到页面底端时自动加载更多信息

    基于JQuery实现滚动到页面底端时自动加载更多信息 关键代码: 代码如下: var stop=true; $(window).scroll(function(){ totalheight = par ...

  6. 常用JS图片滚动(无缝、平滑、上下左右滚动)

    常用JS图片滚动(无缝.平滑.上下左右滚动)代码大全 <head><-----></head><body> <!--向下滚动代码开始-->& ...

  7. vant list列表滚动到底部加载更多会滚动到顶部问题

    如果使用异步加载数据并使用了vant中的toast做加载中提示,则有可能会导致列表滚动高度为0,也就是回到了顶部.只要在list加载回调里不使用toast就可以避免这个问题.

  8. marquee实现文字移动效果;js+div实现文字无缝移动效果

    1.marquee实现文字移动: <marquee width="220px;" scrollamount="5" onmouseover="t ...

  9. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

随机推荐

  1. 分布式系统监视zabbix讲解六之自定义监控项

    概述 Zabbix支持许多在多种情况下使用宏.宏是一个变量,由如下特殊语法标识: {MACRO} 根据在上下文中, 宏解析为一个特殊的值. 有效地使用宏可以节省时间,并使Zabbix变地更加高效. 在 ...

  2. JAVA之代理2CGLib

    对于CGLib的代理目前还是知道如何使用,以及理论上它的原理,到源码上的理解还没到位 https://www.jianshu.com/p/9a61af393e41?from=timeline& ...

  3. 苏大文正节点一 ORA-00603 ORA-27504 ORA-27300 ORA-27301 ORA-27302 BUG

      Problem Description --------------------------------------------------- Tue Sep 01 04:05:33 2020 s ...

  4. python爬取花木兰豆瓣影评,并进行词云分析

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取 python免费学习资 ...

  5. cas机制的原理和使用

    一.什么是cas CAS,compare and swap的缩写,中文翻译成比较并交换. CAS 操作包含三个操作数 -- 内存位置(V).预期原值(A)和新值(B). 如果内存位置的值与预期原值相匹 ...

  6. 【性能监控-Perfmon工具】手动添加数据收集器,点击保存时需要输入用户NT AUTHORITY\SYSTEM的密码问题

    发现是有的电脑会弹出这种输入用户NT AUTHORITY\SYSTEM密码的现象,有的电脑不会弹出这个对话框.......仍然没搞懂是为什么? 关键是输入windows用户登录时的密码也不对!!压根不 ...

  7. 微服务实战系列(四)-注册中心springcloud alibaba nacos

    1.场景描述 因要用到微服务,关于注册中心这块,与同事在技术原型上做了讨论,初步定的方案是使用:阿里巴巴的nacos+springcloud gateway,下面表格是同事整理的注册中心对比,以前用的 ...

  8. 《Java从入门到失业》第四章:类和对象(4.6):类路径

    4.6类路径 4.6.1什么是类路径 前面我们讨论过包,知道字节码文件最终都会被放到和包名相匹配的树状结构子目录中.例如上一节的例子: 其实类还有一种存放方式,就是可以归档到一个jar文件中,jar文 ...

  9. org.springframework.dao.InvalidDataAccessApiUsageException: The given id must not be null!; nested exception is java.lang.IllegalArgumentException: The given id must not be null

    通过这个简单的案例,手把手教给你分析异常信息(适合初学者看) org.springframework.dao.InvalidDataAccessApiUsageException: The given ...

  10. Chrome使用video无法正常播放MP4视频的解决方案

    H5的video标签让前端开发者用一行代码就可以实现视频和音频的播放,然而,有时候我们会突然发现,某些Mp4格式的视频在Chrome下居然无法正常播放?这究竟是什么原因呢?这篇文章主要分析了部分Mp4 ...