JavaScript 网页自动滚动

发表于 更新于 分类于

前言

由于本人日常爱好练吉他，频繁在网页中查找吉他谱，苦于一边弹琴一边翻页，遂想可否通过 JavaScript 脚本添加到网页收藏夹中，实现网页自动滚动，解放右手，芜湖～

设计

此段脚本的功能为自动滚动网页，监听键盘的 “+”、 “-”、 “Enter”、 “Escape”, 实现加速，减速，开始，暂停。

浏览器收藏夹可以运行 JavaScript 代码是我们能一键启动的重要原因。

主要函数如下

1
2
3
4
5
6
7
window.scroll(x-coord,y-coord ) //实现翻页

window.scroll(0, ++currentTop)  // 其中currentTop不断增大实现一次滚动

setInterval(code,millisec[,"lang"]) //使代码不断运行，不断滚动，调整millisec以调整滚动速度

window.addEventListener() //监听键盘事件，实现加速减速开始暂停

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
let currentTop = document.documentElement.scrollTop; //设置当前页面的页面顶端
let speed = 200; //速度
var time = 0;

function AutoScroll() {
    window.scroll(0, ++currentTop);
}

//在滚动鼠标后重新赋值滚动后页面的顶端，以防需要使用鼠标调整位置的情况
window.onscroll = function () {
    currentTop = document.documentElement.scrollTop;
};

window.addEventListener(
    "keydown",
    function (event) {
        if (event.defaultPrevented) {
            return; // Should do nothing if the default action has been cancelled
        }

        var handled = false;
        if (event.key !== undefined) {
            // Handle the event with KeyboardEvent.key and set handled true.
            switch (event.key) {
                case "Enter":
                    clearInterval(time);
                    time = setInterval(AutoScroll, speed);
                    console.log("start");
                    break;
                case "Escape":
                    clearInterval(time);
                    console.log("stop");

                    break;
                case "+":
                    speed /= 2;
                    clearInterval(time);
                    time = setInterval(AutoScroll, speed);
                    console.log("speed:" + speed);
                    break;
                case "-":
                    speed *= 2;
                    clearInterval(time);
                    time = setInterval(AutoScroll, speed);
                    console.log("speed:" + speed);

                    break;
            }
            handled = true;
        } else if (event.keyCode !== undefined) {
            // Handle the event with KeyboardEvent.keyCode and set handled true.
            switch (event.key) {
                case 108:
                    setInterval(AutoScroll, speed);
                    break;
                case 27:
                    clearInterval(time);
                    break;
                case 107:
                    if (speed > 0) {
                        speed /= 2;
                        clearInterval(time);
                        time = setInterval(AutoScroll, speed);
                        console.log(speed);
                    }
                    break;
                case 109:
                    {
                        speed *= 2;
                        clearInterval(time);
                        time = setInterval(AutoScroll, speed);
                        console.log(speed);
                    }
                    break;
            }
            handled = true;
        }

        if (handled) {
            // Suppress "double action" if event handled
            event.preventDefault();
        }
    },
    true
);

结语

最后随便找个网页添加到收藏夹，编辑这个收藏夹网页，更改 URL 即可以实现一键解放右手。