【小书签】网页自动滚动

大家的板块 稻米鼠的频道🐹
1

因为发现又朋友在用，所以根据需求做了一些修改。

【如何安装：】 https://bookmarklet.appinn.me

滚动版

  • stepTime 表示速度，数值越大，速度越慢……（诶，其实代表滚动一像素需要多少毫秒；
  • 点书签开始滚动；
  • 点网页空白处切换滚动状态（开始/停止）；
  • 双击网页空白返回顶部
javascript: (function () {
  const d = document.documentElement;
  const stepTime = 40;
  const scroll = {};
  const stopScroll = ()=>{
    scroll.state = false;
    scroll.time = null;
    scroll.pos = null;
  };
  stopScroll();
  const scrollThisPage = (timestamp)=>{
    if(scroll.time){
      scroll.pos = scroll.pos!==null ? scroll.pos + (timestamp - scroll.time)/stepTime : d.scrollTop;
      d.scrollTop = scroll.pos;
    }
    scroll.time = timestamp;
    if(d.scrollTop < d.scrollHeight-window.innerHeight-10  && scroll.state){
      window.requestAnimationFrame(scrollThisPage);
    }else{
      stopScroll();
    }
  };

  scroll.state = true;
  window.requestAnimationFrame(scrollThisPage);

  d.onclick = ()=>{
    if(scroll.state){
      stopScroll();
    }else{
      scroll.state = true;
      window.requestAnimationFrame(scrollThisPage);
    }
  };
  d.ondblclick = ()=>{
    stopScroll();
    d.scrollTop = 0;
  };
})();
// bookmarklet: 网页自动滚动 - 平滑版

翻页版

鉴于长时间注视持续移动的文字可能视觉疲劳，所以建议使用翻页版。

  • stepTime 是间隔多少毫秒翻到下一屏（1000毫秒 = 1秒）；
  • overlap 是两屏内容重叠的高度，如果页面有悬浮导航建议适当调大；
  • 点书签开始滚动（不是立刻下一屏，要等待间隔时间之后才到下一屏；
  • 点网页空白处切换滚动状态（开始/停止）；
  • 双击网页空白返回顶部
javascript: (function () {
  const d = document.documentElement;
  const stepTime = 5000;
  const overlap = 80;
  const scroll = {};
  const stopScroll = ()=>{
    scroll.state = false;
    scroll.time = null;
  };
  stopScroll();
  const scrollThisPage = (timestamp)=>{
    if(scroll.time){
      if((timestamp - scroll.time)>=stepTime){
        d.scrollTop += window.innerHeight - overlap;
        scroll.time = timestamp;
      }
    }else{
      scroll.time = timestamp;
    }
    
    if(d.scrollTop < d.scrollHeight-window.innerHeight-10  && scroll.state){
      window.requestAnimationFrame(scrollThisPage);
    }else{
      stopScroll();
    }
  };

  scroll.state = true;
  window.requestAnimationFrame(scrollThisPage);

  d.onclick = ()=>{
    if(scroll.state){
      stopScroll();
    }else{
      scroll.state = true;
      window.requestAnimationFrame(scrollThisPage);
    }
  };
  d.ondblclick = ()=>{
    stopScroll();
    d.scrollTop = 0;
  };
})();
// bookmarklet: 网页自动滚动 - 翻页版
1 个赞
2

【網頁自動滾動翻頁版】這真的解決我的問題了，翻頁版的對眼睛比較舒服，之前找到的都是滾動版，相比之下還是翻頁版符合我的需求，謝謝 @dms ～～！我可以好好享受小說了～

4

你好，我一直用您的小书签，很好用，关于浏览网页我有一个需求，我的工作需要关注固定页面位置的数据和信息。
我找了一个页面刷新插件可以定时刷新页面，但是还需要手动下拉到指定的位置来查看信息，不知道可不可以增加一个功能。
就是进入页面后，页面直接定位在固定位置，我翻了很多资料，说是可以设定锚点，TOP值，我对编程或者脚本实在不懂，不知道能不能帮到我。

6

@Bigcrab

我搞定了，是油猴脚本，不知道你是否会用。如果不会，建议先学习一下有关“油猴子”的知识，放心啦，其实挺简单的，比装浏览器扩展复杂那么一丢丢而已（要装好扩展再寻找脚本）。

脚本地址： 我看到哪里啦？！ （要先有油猴子的扩展哦)

简单说明一下：

  • 滚动时自动记录当前位置；
  • 关闭页面不会清楚位置记录；
  • 下次打开会自动跳转到最后的位置记录处；

细节说明：

  • 要页面加载完成才会进行位置的跳转哦~
  • 如果是懒加载页面，就是那种拉到最底下又加载出来一截的页面，它会每隔 3 秒尝试一次向下滚动，直到滚动到对应位置（或者尝试 20 次还没到也会停止，一般应该不会有这么长的需求吧
  • 由于不容易进行网页的对应，所以要求两次网址完全相同，对于如本站这种网址会随着页面滚动而发生变化的网站，无法生效。

使用细节：

因为不知道你想对哪些网址使用，所以当前脚本对所有网址生效。

但是显然这样是没有什么必要的。你可以通过如下方式进行设置：

  • 在”油猴子“扩展的设置中找到本脚本
  • 在脚本的设置页面找到 ”匹配“、”包含“、”match“ 之类字样的项目
  • 取消”保留原有规则“，或者类似文字前面的勾选
  • 在对应的文本框中写下你需要匹配的网站，这样写：
*://baidu.com/*
*://*.baidu.com/*

一行一个网址，简单说就是把网址最前面一段写进去，找猫画虎的把对应位置内容改成 * 就可以了

老规矩，如果觉得好用，就请我喝一杯咖啡吧，二维码在最上面网址里有

7

你好，非常感谢，您的回复，我安装了油猴子，但是不知道怎么用，看了教程也不行。

这也算网页浏览的一种功能需求，比如用电脑网页看小说，可以直接跳到小说页面的位置。

我不知道复杂程度，或者可以简单点，就是载入页面后，固定在自定义的top值的位置。

9

好用！ 感谢鼠

10

开心，感谢使用~

13

你好，这个网页滚动今天有在弄。我也用过谷歌的Autoscroll插件，都有点缺陷，我现在工作的页面经常需要滚动页面，不过我在网上找的都不能让这个页面滚动，好像是因为那个滚动条是内部元素，导致无法滚动的，能不能添加一些功能，让内部的滚动条也可以滚动

14

可以给出链接吗？

15

页面有个表格，表格有滚动条，我找了很多可以自动滚动插件，效果都不理想

16

额，你没有账号进不去的，算了

3

你用的舒服，我就很開心啦

1 个赞
8

电脑的操作系统可以看作一个平台，我们在上面安装各种软件来实现不同的功能，

浏览器也可以看作一个平台，我们在上面安装各种扩展来实现不同的功能。

如果这都能理解，那下面就很容易了：

”油猴子“是一类脚本，首先需要在浏览器上安装一个扩展作为管理器，我们可以把这个管理器也看做一个平台，然后在上面安装不同的脚本来实现各种功能。

所以单纯有管理器并不能够做什么，还要有脚本才能发挥威力。

常用的管理器有（根据自己的浏览器，装一个就好啦~）：

12

没什么啦，这个功能还比较简单。

5

@Bigcrab 晚点我去实现一下，不过我觉得用油猴子比较合适

11

谢谢你的付出，感谢，这种互动让人感动，祝你工作步步高升，事业财源广进。