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. 十大基本功之testbench

      1. 激励的产生 对于testbench而言,端口应当和被测试的module一一对应.端口分为input,output和inout类型产生激励信号的时候,input对应的端口应当申明为reg, o ...

  2. Mongo--03 mongo副本集、备份与恢复

    目录 一.mongo副本集配置 二.查看副本集状态 三.副本集权重调整 四.创建节点 五.仲裁节点 六.mongo备份与恢复 七.准备测试数据 一.mongo副本集配置 1.创建节点目录和数据目录 # ...

  3. Python自动化学习--异常提示

    举例:打开一个不存在的文件时: >>open("abc.txt","r")会提示错误 Traceback (most recent call las ...

  4. VS插件CodeRush for Visual Studio发布v18.2.9|附下载

    CodeRush能帮助你以极高的效率创建和维护源代码.Consume-first 申明,强大的模板,智能的选择工具,智能代码分析和创新的导航以及一个无与伦比的重构集,在它们的帮助下能够大大的提高你效率 ...

  5. hadoop中yarn

    一.yarn的概述 Apache Yarn(Yet Another Resource Negotiator的缩写)是hadoop集群资源管理器系统,Yarn从hadoop 2引入,最初是为了改善Map ...

  6. 【leetcode】1108. Defanging an IP Address

    题目如下: Given a valid (IPv4) IP address, return a defanged version of that IP address. A defanged IP a ...

  7. Leetcode 16. 3Sum Closest（指针搜索）

    16. 3Sum Closest Medium 131696FavoriteShare Given an array nums of n integers and an integer target, ...

  8. 登陆一个系统时，前端js实现的验证，记住密码等功能

    记住密码部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...

  9. POJ 1384 Piggy-Bank （完全背包）

    Piggy-Bank 题目链接: http://acm.hust.edu.cn/vjudge/contest/130510#problem/F Description Before ACM can d ...

  10. 浅谈IPv4至IPv6演进的实施路径

    作者:个推运维平台网络工程师 宗堂   1 业务背景 在互联网呈现爆炸式发展的今天, IPv4网络地址数量匮乏等问题将会影响到我国的互联网发展与应用,制约物联网.5G等新业务开展.今年4月国家工信部发 ...