dom元素的自上而下自动滚动
dom元素的自上而下自动滚动
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 300px;
height: 300px;
overflow-y: auto;
overflow-x: hidden;
}
</style>
</head>
<body>
<div id="box">
<p>sdjfhjdshfjdshf</p>
</div>
</body>
</html>
<script> let interval = null; // 承载定时器对象
/**
*
* @param element dom
* @param height dom元素的高度
* @param step 每次滚动步长
* @param timeSpace 定时器时间间隔
* @param delay 页面加载完成之后多久之后进行滚动
* @param isAlways 当滚动到页面底部之后是否进行再次滚动
* @param finishTime 完成滚动之后,若是允许多次滚动,设置延迟时间
* @param isMouseenter 是否有鼠标划入操作
*/
function startScroll(element, height, step, timeSpace, delay, isAlways, finishTime, isMouseenter) {
let temp = delay;
if (isMouseenter === true) {
delay = 0;
}
setTimeout(() => {
interval = setInterval(() => {
// 当element.scrollTop小于element.scrollHeight - height时执行定时器
if (element.scrollTop < element.scrollHeight - height) {
element.scrollTop = element.scrollTop + step;
} else {
delay = temp;
if (isAlways === true) {
clearInterval(interval);
element.scrollTop = 0;
setTimeout(() => {
startScroll(element, height, step, timeSpace, delay, isAlways, finishTime);
}, finishTime)
} else {
clearInterval(interval);
} } }, timeSpace);
}, delay);
} function stopScroll() {
clearInterval(interval);
} window.onload = function () {
let element = document.getElementById('box');
for(let i=0; i<40; i++) {
let str = document.createElement('p');
str.innerHTML = 'jdsfhjdshfjdshfjdshfdjshf';
element.appendChild(str);
}
startScroll(element, 300, 1, 20, 3000, true, 3000);
element.onmouseenter = function () {
stopScroll();
};
element.onmouseleave = function () {
startScroll(element, 300, 1, 20, 3000, true, 3000, true);
}
}
</script>
dom元素的自上而下自动滚动的更多相关文章
- 让DOM元素自动滚到视野内ScrollIntoView
概述 项目中需要把一个DOM元素自动滚动到视野内,百思不得其解,最后再element库里面发现了这个方法,记录下来供以后开发时参考,相信对其他人也有用. 参考资料:element scroll-int ...
- JS + jQuery 实现元素自动滚动到底部,兼容IE、FF、Chrome
HTML代码: <ul class="tasklog-dialog-ul" id="auto_to_bottom"> <li>删除虚拟机 ...
- JQuery利用sort对DOM元素进行排序
前言 排序对于我们是再熟悉不过了,在绝大数应用程序中都会有这样一个场景:当我们从服务器端获取一个列表时,在界面上进行渲染,我们可以会依赖于某一个规则来进行排序,当然此时绝大多数会再次与服务器进行交互来 ...
- DOM元素querySelectorAll可能让你意外的特性表现
一.时间紧急,废话少说 本文所在的页面藏匿了下面这些代码: <img id="outside"> <div id="my-id"> &l ...
- web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记
hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...
- jquery中dom元素的attr和prop方法的理解
一.背景 在编写使用高版本[ jQuery 1.6 开始新增了一个方法 prop()]的jquery插件进行编写js代码的时候,经常不知道dom元素的attr和prop方法到底有什么区别?各自有什么应 ...
- 一个DOM元素绑定多个事件时,先执行冒泡还是捕获
绑定在被点击元素的事件是按照代码顺序发生,其他元素通过冒泡或者捕获“感知”的事件,按照W3C的标准,先发生捕获事件,后发生冒泡事件.所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事 ...
- JavaScript获取DOM元素位置和尺寸大小
在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScri ...
- Jquery实现图片左右自动滚动
图片左右滚动的效果想必大家都有见到过吧,其实很简单.在本文将为大家介绍下使用Jquery是如何实现图片左右自动滚动的. 代码如下:<!DOCTYPE HTML> <html> ...
随机推荐
- 事件,IO,select
事件驱动模型 对于普通编程来说,代码遵循线性流程:开始-->代码A-->代码B-->代码C-->...-->结束,编程者知道代码的运行顺序,由编程者控制 事件驱动模型,流 ...
- qt配置opengl
cmake 编译opengl,参考https://wiki.qt.io/How_to_setup_Qt_and_openCV_on_Windows cmake configure完成没有错误后,点击g ...
- 6号板编译失败找不到arm-none-linux-gnueabi-gcc
明明已经添加到/etc/environment 安装sudo apt-get install lib32z1 lib32ncurses5
- GUI学习之二十二——QRubberBand学习总结
今天学习一种全新的输入控件——QRubberBand()控件(橡皮筋选中) 一.描述 QRubberBand()提供了一个矩形或西安来只是选择或边界的效果(就像在桌面上点击鼠标后拖拽拉出来的框一样), ...
- 匿名函数 python内置方法(max/min/filter/map/sorted/reduce)面向过程编程
目录 函数进阶三 1. 匿名函数 1. 什么是匿名函数 2. 匿名函数的语法 3. 能和匿名函数联用的一些方法 2. python解释器内置方法 3. 异常处理 面向过程编程 函数进阶三 1. 匿名函 ...
- SonarQube规则之坏味道类型
1.Abbreviation As Word In Name (默认 关闭)坏味道 主要检查验证标识符名称中的缩写(连续大写字母)长度,还允许执行骆驼案例命名allowedAbbreviationLe ...
- Java数据结构与算法(3):队列
队列也是一种表,不同的是队列在一端进行插入而在另一端进行删除. 队列模型 队列的基本操作包括入队.出队操作.在表的末端插入元素,在表的开头删除元素,即先进先出(FIFO). 队列的数组实现 对于每一个 ...
- xuyaojiade
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script><scri ...
- 阿里云配置通用服务的坑 ssh: connect to host 47.103.101.102 port 22: Connection refused
1.~ wjw$ ssh root@47.103.101.102 ssh: connect to host 47.103.101.102 port 22: Connection refused ssh ...
- Oracle10g 64位 在Windows 2008 Server R2 中的安装 DBconsole无法启动
致谢!本文参考http://www.cnblogs.com/leiOOlei/archive/2013/08/19/3268239.html 背景: 操作系统Windows 2008 Server R ...