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. java 模拟表单方式提交上传文件

    /** * 模拟form表单的形式 ,上传文件 以输出流的形式把文件写入到url中,然后用输入流来获取url的响应 * * @param url 请求地址 form表单url地址 * @param f ...

  2. Django【第7篇】：Django之ORM跨表操作（聚合查询，分组查询，F和Q查询等）

    django之跨表查询及添加记录 一:创建表 书籍模型: 书籍有书名和出版日期,一本书可能会有多个作者,一个作者也可以写多本书,所以作者和书籍的关系就是多对多的关联关系(many-to-many); ...

  3. Markdown的使用和计算机基础

    TOC] 一级标题 这不是开玩笑 你问我为什么? 粗的才好(滑稽) 什么!明明有人推我 ==一闪一闪亮晶晶== 我上面有人^人在这^ water?H~2~O(下标) hello world! hell ...

  4. ubuntu16.04 安装mysql

    安装mysql 1.sudo apt-get install mysql-server 2.sudo apt install mysql-client 3.sudo apt install libmy ...

  5. LeetCode--015--三数之和(python)

    给定一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b + c = 0 ?找出所有满足条件且不重复的三元组. 先对nums进行排序,再用双指针,L ...

  6. appium环境666

    一.安装JDK,配置JDK环境    appium下载地址: https://github.com/appium/appium-desktop/releases/ 百度搜索下载就行,这里分享一个下载链 ...

  7. 如何生成各种mif文件，绝对经典！！！

    mif文件生成模板,只需要5步,很简单!!!!! 先说明如何操作,1-2-3-4-5步,后面附上模板!!! 下面以汉字去模演示过程: 1.取模软件设置:注意这里是设置的输出数据的格式!!!!!!!!! ...

  8. [ZJU 1003] Crashing Balloon

    ZOJ Problem Set - 1003 Crashing Balloon Time Limit: 2 Seconds      Memory Limit: 65536 KB On every J ...

  9. JAVA-IO模型(BIO,NIO,AIO)

    基本概念 阻塞和非阻塞 阻塞是进行读写时, 如果当时没有东西可读,或者暂时不可写, 程序就进入等待, 直到有东西可读或者可写为止 非阻塞是如果没有东西可读, 或者不可写, 读写函数马上返回, 而不会等 ...

  10. FMDB源码解析(上)-FMDB基本使用

    目录 一: 初识FMDB 二: 基本使用 三: 基本操作 结束 最后更新:2017-02-22 2017, 说到做到 一: 初识FMDB FMDB是iOS平台的SQLite数据库框架 FMDB以OC的 ...