【小书签】网页自动滚动

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

【如何安装:】 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 个赞

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

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

@Bigcrab

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

脚本地址: 我看到哪里啦?! (要先有油猴子的扩展哦)

简单说明一下

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

细节说明

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

使用细节

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

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

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

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


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

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

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

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

好用! 感谢鼠

开心,感谢使用~

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

可以给出链接吗?

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

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

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

1 个赞

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

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

如果这都能理解,那下面就很容易了:

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

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

常用的管理器有(根据自己的浏览器,装一个就好啦~):

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

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

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