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. php内置函数分析array_count_values()

    PHP_FUNCTION(array_count_values) { zval *input, /* Input array */ *entry, /* An entry in the input a ...

  2. 什么是UAT

    基本概念 UAT,英文User Acceptance Test的简写,也就是用户验收测试,或用户可接受测试,系统开发生命周期方法论的一个阶段,这时相关的用户或独立测试人员根据测试计划和结果对系统进行测 ...

  3. DevOps书单：调研了101名专家，推荐这39本必读书籍

    任何一个领域都遵循从新人到熟手,从熟手到专家的路径.在成长过程中,DevOps人经常会陷入没人带,没人管,找不到职业方向的迷茫. DevOps是在商业演进与企业协作的进化过程中诞生的一个全新职业,被很 ...

  4. vue-cli项目中引入全局scss

    加载一个全局设置文件 在每个组件里加载一个设置文件,而无需每次都将其显式导入,是一个常见的需求.比如为所有组件全局使用 scss 变量.为了达成此目的: npm install sass-resour ...

  5. CSS画心形和蛋形

    一.心形 使用transform-origin属性实现设置不同的点为原点 1.改变元素基点transform-origin(transform-origin是变形原点,原点就是元素绕着旋转或变形的点) ...

  6. mysql LIKE通配符 语法

    mysql LIKE通配符 语法 作用:用于在 WHERE 子句中搜索列中的指定模式.惠州大理石平板 语法:SELECT column_name(s) FROM table_name WHERE co ...

  7. 面向对象this关键字和概述和应用

    面向对象this关键字和概述和应用 package thisdemo; /** * 面向对象this关键字和概述和应用 * */ //定义老师类 class Teacher { private Str ...

  8. 【bzoj2073】【[POI2004]PRZ】位运算枚举子集的特技

    (上不了p站我要死了) Description 一只队伍在爬山时碰到了雪崩,他们在逃跑时遇到了一座桥,他们要尽快的过桥. 桥已经很旧了, 所以它不能承受太重的东西. 任何时候队伍在桥上的人都不能超过一 ...

  9. POJ Knight Moves 2243 x

    Knight Moves Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 13974   Accepted: 7797 Des ...

  10. [USACO17JAN]Promotion Counting 题解

    前言 巨佬说:要有线段树,结果蒟蒻打了一棵树状数组... 想想啊,奶牛都开公司当老板了,我还在这里码代码,太失败了. 话说奶牛开个公司老板不应该是FarmerJohn吗? 题解 刚看到这道题的时候竟然 ...