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元素的自上而下自动滚动的更多相关文章

  1. 让DOM元素自动滚到视野内ScrollIntoView

    概述 项目中需要把一个DOM元素自动滚动到视野内,百思不得其解,最后再element库里面发现了这个方法,记录下来供以后开发时参考,相信对其他人也有用. 参考资料:element scroll-int ...

  2. JS + jQuery 实现元素自动滚动到底部，兼容IE、FF、Chrome

    HTML代码: <ul class="tasklog-dialog-ul" id="auto_to_bottom"> <li>删除虚拟机 ...

  3. JQuery利用sort对DOM元素进行排序

    前言 排序对于我们是再熟悉不过了,在绝大数应用程序中都会有这样一个场景:当我们从服务器端获取一个列表时,在界面上进行渲染,我们可以会依赖于某一个规则来进行排序,当然此时绝大多数会再次与服务器进行交互来 ...

  4. DOM元素querySelectorAll可能让你意外的特性表现

    一.时间紧急,废话少说 本文所在的页面藏匿了下面这些代码: <img id="outside"> <div id="my-id"> &l ...

  5. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  6. jquery中dom元素的attr和prop方法的理解

    一.背景 在编写使用高版本[ jQuery 1.6 开始新增了一个方法 prop()]的jquery插件进行编写js代码的时候,经常不知道dom元素的attr和prop方法到底有什么区别?各自有什么应 ...

  7. 一个DOM元素绑定多个事件时，先执行冒泡还是捕获

    绑定在被点击元素的事件是按照代码顺序发生,其他元素通过冒泡或者捕获“感知”的事件,按照W3C的标准,先发生捕获事件,后发生冒泡事件.所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事 ...

  8. JavaScript获取DOM元素位置和尺寸大小

      在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScri ...

  9. Jquery实现图片左右自动滚动

    图片左右滚动的效果想必大家都有见到过吧,其实很简单.在本文将为大家介绍下使用Jquery是如何实现图片左右自动滚动的. 代码如下:<!DOCTYPE HTML>  <html> ...

随机推荐

  1. MTK6261之检测是否插了T卡

    T卡的更目录可用SRV_FMGR_CARD_DRV 其宏定义如下: #define SRV_FMGR_CARD_DRV FS_GetDrive(FS_DRIVE_V_REMOVABLE, 1, FS_ ...

  2. dos2unix 将DOS格式转换成NUIX格式

    1.命令功能 dos2unix将windows文件格式转换成unix文件格式. 2.语法格式 dos2unix  file 3.使用范例 [root@localhost ~]# dos2unix wi ...

  3. 最小可观(Minimal Observability Problem in Conjunctive Boolean Networks)

    论文链接 1. 什么是 conjunctive Boolean network (CBN) 仅仅包含and运算. 下面这个式子为恒定更新函数 2. 什么是可观 定义在时刻k是CBN的状态为 X(k) ...

  4. Codeforces 948 数论推导 融雪前缀和二分check 01字典树带删除

    A. 全部空的放狗 B. 先O(NLOGNLOGN)处理出一个合数质因数中最大的质数是多少 因为p1 x1 x2的关系是 x2是p在x1之上的最小倍数 所以x1的范围是[x2-p+1,x2-1]要使最 ...

  5. Linux加载一个可执行程序并启动的过程

    原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 作者:严哲璟 以shell下 ...

  6. 28.密码学知识-hash函数-5——2019年12月19日

    5. 单向散列函数 "单向散列函数 --- 获取消息的指纹" 在刑事侦查中,侦查员会用到指纹.通过将某个特定人物的指纹与犯罪现场遗留的指纹进行对比,就能够知道该人物与案件是否存在关 ...

  7. 《转》tensorflow学习笔记

    from http://m.blog.csdn.net/shengshengwang/article/details/75235860 1. RNN结构 解析: (1)one to one表示单输入单 ...

  8. Vuex-全局状态管理【简单小案例】

    前言: Vuex个人见解: 1.state :所有组件共享.共用的数据.理解为不是一个全局变量,不能直接访问以及操作它.2.mutations : 如何操作 state 呢?需要有一个能操作state ...

  9. Day_03-函数和模块的使用

    使用函数求阶乘 使用while循环的代码: m = float(input('m = ')) n = float(input('n = ')) mn = m - n fm = 1 while m != ...

  10. @PathVariable注解使用

    @PathVariable是spring3.0的一个新功能:接收请求路径中占位符的值 语法: @PathVariable("xxx")通过 @PathVariable 可以将URL ...