#1 - 2021-9-14 02:52
liurui39660
链接：https://greasyfork.org/en/scripts/432360-draggable-reference-line

近期在自学JavaScript，刚好发现在阅读长文章时容易忘记上次看到哪里，也没有找到合适的插件，于是自己写了一个。

默认位于页面顶端，可拖拽至其他位置。
位置会保存在localStorage，浏览器重启后依旧存在。
线宽度，拖拽区宽度，颜色都可直接在代码开头处自定义。
找不到线时可以搜索隐形文字"#DraggableReferenceLine"。
双击或拖拽出上边缘即可重置参考线。

欢迎诸位进行测试，提出反馈和修改建议。

截图：

#2 - 2021-9-14 08:15
烈之斩 (V1046-R MAHORO)
chrome + violent monkey or Tampermonkey, 线拽不动

Uncaught DOMException: Failed to execute 'setPointerCapture' on 'Element': No active pointer with the given id is found.
    at HTMLDivElement.<anonymous> (chrome-extension://jinjaccalgkegednnccohejagnlnfdag/Draggable%20Reference%20Line.user.js#148:49:9)
#2-1 - 2021-9-14 08:20
烈之斩
原因八成是： https://stackoverflow.com/questi ... -chrome-and-firefox
#2-2 - 2021-9-14 14:19
liurui39660
烈之斩 说: 原因八成是： https://stackoverflow.com/questi ... -chrome-and-firefox
我想不到如何既能有ev.pointerId，又可以有ev.detail，所以就移除了setPointerCapture，虽然光标移到浏览器外时会变回普通的形态。
我在Chrome Dev上测试可以拖拽了。
#3 - 2021-9-14 10:00
拿月亮自刎 (情更怯)
有个思路：监听滚动事件，自动记录滚动的位置。
利用   https://developer.mozilla.org/en ... Page_Visibility_API
以及监听 beforeunload ，记录写入最后的滚动的位置。


window.addEventListener('scroll', (e) => { console.log(e.target, e.target.scrollTop); } , true);
#3-1 - 2021-9-14 15:10
liurui39660
因为是运行在document-body，所以线会比页面里的其他内容先加载，即是此时线是页面的底部，所以没有办法滚动超过这个位置，除非另外加一个event listener。
通过load可以在加载完后滚动到线的位置，再用beforeunload重置滚动来避免刷新自带的滚动。
不过总感觉这个功能已经超出线自身需要的部分，因为它只应该是一条线而已。