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. jvm slot复用

    如果当前字节码PC计数器的值已经超出了某个变量的作用域,那这个变量对应的Slot就可以交给其他变量使用. 字节码PC计数器就是程序计数器,程序计数器记录当前线程所执行的字节码的偏移地址.如果这个值超出 ...

  2. 并行操作多个序列map

    >>> def add1(a): return a + 1 >>> def add2(a,b): return a + b >>> def add ...

  3. Java面试之基础篇（4）

    31.String s = new String("xyz");创建了几个StringObject?是否可以继承String类? 两个或一个都有可能,”xyz”对应一个对象,这个对 ...

  4. 密码技术之密钥、随机数、PGP、SSL/TLS

    第三部分:密码技术之密钥.随机数.PGP.SSL/TLS 密码的本质就是将较长的消息变成较短的秘密消息——密钥. 一.密钥 什么是密钥? (1)密钥就是一个巨大的数字,然而密钥数字本身的大小不重要,重 ...

  5. iOS Core Image-----十行代码实现微信朋友圈模糊效果

    昨天下午微信的朋友圈着实火了一把,在这之后好多程序员都通过抓包工具看到了原图,但是我却在想,网上说是在移动前端做到的那是怎么做到的呢,经过一些学习,终于掌握了一些Core Image的知识,做出了相应 ...

  6. Day01_课后练习题

    1.(将摄氏温度转化华氏温度)编写一个从控制台读取摄氏温度并将他转变为华氏温度并予以显示的程序.转换公式如下. Fahrenheit = (9 / 5) *  celsius + 32 这里是这个程序 ...

  7. CF D. Labyrinth 01BFS

    由于上下走不限制,所以按照贪心,我们应该尽可能走上下方向. 我们可以开一个双端队列,并认为每次提取队首的时候得到的是到达该点的最优策略.(这个一定是唯一的,因为不可能向右走几格,然后再退回去. ) 那 ...

  8. 2017乌鲁木齐网络赛 J题 Our Journey of Dalian Ends ( 最小费用最大流 )

    题目链接 题意 : 给出一副图,大连是起点,终点是西安,要求你求出从起点到终点且经过中转点上海的最小花费是多少? 分析 : 最短路是最小费用最大流的一个特例,所以有些包含中转限制或者经过点次数有限制的 ...

  9. Numpy基础(数组创建，切片，通用函数）

    1.创建ndarray 数组的创建函数: array:将输入的数据(列表,元组,数组,或者其他序列类型)转换为ndarray.要么推断出dtype,要么显式给定dtype asarray:将输入转换为 ...

  10. 洛谷P1982 小朋友的数字——题解

    题目传送 简单地说,这题就是让我们求前i个数的最大子串和和最值. 对于最大子串和,我们可以设一个变量qian,表示以当前元素结尾的最大子串的子串和.若搜索完第i-1个小朋友,现在看到第i个小朋友时,若 ...