标签：body 滚动 documentElement scrollTop document speed 油猴 scrollHeight 页面

这是我写的第一个脚本，实现起来很简单，有兴趣的话可以下载玩玩。添加链接描述
下面是它的源代码：

    // ==UserScript==
    // @name         autoScroll
    // @namespace    eyes
    // @version      0.1
    // @description  It allows the page to scroll on its own
    // @author       eyes
    // @match        *://*/*
    // @grant        none
    // ==/UserScript==
     
    (function() {
        'use strict';
                var speed = 0;
            // 获取滑动位置
            function getScrollTop() {
                var scrollTop = 0,
                    bodyScrollTop = 0,
                    documentScrollTop = 0;
                if (document.body) {
                    bodyScrollTop = document.body.scrollTop;
                }
                if (document.documentElement) {
                    documentScrollTop = document.documentElement.scrollTop;
                }
                scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
                return scrollTop;
            }
            //文档的总高度
            function getScrollHeight() {
                var scrollHeight = 0,
                    bodyScrollHeight = 0,
                    documentScrollHeight = 0;
                if (document.body) {
                    bodyScrollHeight = document.body.scrollHeight;
                }
                if (document.documentElement) {
                    documentScrollHeight = document.documentElement.scrollHeight;
                }
                scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
                return scrollHeight;
            }
            //浏览器视口的高度
            function getWindowHeight() {
                var windowHeight = 0;
                if (document.compatMode == 'CSS1Compat') {
                    windowHeight = document.documentElement.clientHeight;
                } else {
                    windowHeight = document.body.clientHeight;
                }
                return windowHeight;
            }
     
            // 滚动事件
            setInterval(() => {
                // 判断页面是否滑到底部
                let bottomFlag = (getScrollTop() + getWindowHeight() == getScrollHeight()) ? true : false;
                if (bottomFlag) {
                    speed = 0;
                } else {
                    document.documentElement.scrollTop += speed;
                }
            }, 5)
     
            // 判断是否需要滚动
            document.onkeydown = (e) => {
                e = event || window.event;
                if (e && e.keyCode == 38 && e.altKey) { // 上键
                    let bottomFlag = (getScrollTop() + getWindowHeight() == getScrollHeight()) ? true : false;
                    if (bottomFlag) {
                        document.documentElement.scrollTop += -1;
                    }
                    speed -= 1.5;
                }
                if (e && e.keyCode == 40 && e.altKey) { // 下键
                    speed += 1.5;
                }
            }
     
            // 单击页面停止滚动
            document.onclick = () => {
                speed = 0;
            }
     
            // 滑动滚轮页面停止滚动
            document.onmousewheel = () => {
                speed = 0;
            }
            document.addEventListener("DOMMouseScroll", () => {
                speed = 0;
            })
    })();

标签：body,滚动,documentElement,scrollTop,document,speed,油猴,scrollHeight,页面
来源： https://blog.csdn.net/tongkongyu/article/details/116353736

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。