我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第2篇文章，点击查看活动详情
前言
每天在掘金摸鱼是我的常态，一天不在掘金冲浪，好像有蚂蚁在身上爬，浑身难受。jym个个都是人才，说话又好听，每天都有新的知识在冲击我弱小的脑袋，点赞收藏 == 学会。
心里是乐开花，手腕是不堪言。拯救“鼠标手”刻不容缓，从我开始释放双手，让掘金自己动。
正文
这次开发，油猴脚本就可以满足我的需求：
- 滚动到底部
- 滚动回顶部
- 阅读模式：自动滚动
- 拖拽自定义位置
关于油猴脚本，在【油猴脚本】我给B站搜索加上了日期过滤已经介绍过了，这里不再赘述，如果有哪里表述不正确，麻烦在评论区指出，不胜感激。
首先，先把样式画好，然后在油猴创建脚本，看是否正常。
ok，进入下一步~
拖拽
现在实现拖拽是比较容易的了，只需要用HTML5的draggable属性和[dragend]事件，即可轻松解决。
- 把draggable属性设置为true，就可以让元素可拖动。
- 用鼠标点击可拖拽元素，将元素拖拽到指定位置，并释放鼠标按钮，就会触发dragend事件
- 从事件中获取元素所在位置，将其保存，并设置top、left
存在问题： 释放鼠标后，可以发现位置跟释放前的不太一样，是因为设置的top、left是以元素的左上角为准的，而在拖拽的时候，鼠标是在元素内距离左上角有一定的距离，所以正确的top、left要减去这段距离。但是我打印offsetX、offsetY都是0。这个问题有大佬解决过吗？麻烦支个招。
滚动
滚动到底部、滚动回顶部、自动滚动三个需求其实就是一个滚动的需求。
关于滚动的实现，网上有很多文章可以查阅，大体上是设置scrollTop和scroll()、scrollTo()、scrollBy()三个方法。
scroll()和scrollTo()用法基本一致。
scrollTo()使界面滚动到给定元素的指定坐标位置，即参数为绝对坐标的像素。
scrollBy()按指定的偏移量滚动文档，即参数为相对距离的像素。
对于滚动到底部和滚动回顶部可以使用scroll()和scrollTo()，并加上behavior: "smooth"，让滚动平滑起来。
而自动滚动则使用scrollBy() + requestAnimationFrame实现。
let scrollRequestID;
function read(event) {
if(scrollRequestID) {
stopRead();
} else {
function scroll() {
unsafeWindow.scrollBy({
top: 1
});
if(getScrollValue('scrollHeight') - getScrollValue('scrollTop') <= getScrollValue('clientHeight')) {
stopRead();
} else {
scrollRequestID = window.requestAnimationFrame(scroll);
}
}
scrollRequestID = window.requestAnimationFrame(scroll);
}
}
function stopRead() {
cancelAnimationFrame(scrollRequestID);
scrollRequestID = null;
}
function getScrollValue(key) {
return document.documentElement[key] || document.body[key];
}
复制代码其中，到达底部的判断为scrollHeight - scrollTop <= clientHeight。
bugs
-
两个toolbox
处理：创建toolbox之前，判断文档中是否已存在指定id的元素，是的话直接return。
-
全屏模式，toolbox挡住视频
处理：监听全屏模式切换（
fullscreenchange），控制toolbox的显示隐藏。 -
iframe中会出现第二个toolbox
处理：
unsafeWindow.self != unsafeWindow.top判断是否为iframe，是的话则不创建toolbox。
结语
整个脚本已经上传至greasyfork，欢迎大家下载使用，也可在github点个star。
前几天看到一个言论：科技使人变懒，还是懒促使科技的进步？
期待你在评论区留下看法。
