我报名参与金石计划1期应战——分割10万奖池，这是我的第2篇文章，点击查看活动概况

前言

每天在摸鱼是我的常态，一天不在冲浪，好像有蚂蚁在身上爬，浑身难过。jym个个都是人才，说话又好听，每天都有新的知识在冲击我弱小的脑袋，点赞收藏 == 学会。

心里是乐开花，手腕是不堪言。拯救“鼠标手”刻不容缓，从我开端开释双手，让自己动。

正文

这次开发，油猴脚本就能够满足我的需求：

  • 翻滚到底部
  • 翻滚回顶部
  • 阅览形式：主动翻滚
  • 拖拽自定义方位

关于油猴脚本，在【油猴脚本】我给B站查找加上了日期过滤现已介绍过了，这里不再赘述，如果有哪里表述不正确，费事在谈论区指出，不胜感激。

首要，先把样式画好，然后在油猴创立脚本，看是否正常。

【油猴脚本】我累了，掘金你自己动吧

ok，进入下一步~

拖拽

现在完成拖拽是比较简单的了，只需要用HTML5的draggable特点和[dragend]事情，即可轻松处理。

  1. 把draggable特点设置为true，就能够让元素可拖动。
  2. 用鼠标点击可拖拽元素，将元素拖拽到指定方位，并开释鼠标按钮，就会触发dragend事情
  3. 从事情中获取元素所在方位，将其保存，并设置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

  1. 两个toolbox

    处理：创立toolbox之前，判别文档中是否已存在指定id的元素，是的话直接return。

  2. 全屏形式，toolbox挡住视频

    处理：监听全屏形式切换（fullscreenchange），操控toolbox的显现躲藏。

  3. iframe中会呈现第二个toolbox

    处理：unsafeWindow.self != unsafeWindow.top判别是否为iframe，是的话则不创立toolbox。

结语

整个脚本现已上传至greasyfork，欢迎大家下载运用，也可在github点个star。

前几天看到一个言辞：科技使人变懒，仍是懒促使科技的前进？

等待你在谈论区留下看法。