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

·  阅读 5440
【油猴脚本】我累了,掘金你自己动吧

我报名参加金石计划1期挑战——瓜分10万奖池,这是我的第2篇文章,点击查看活动详情

前言

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

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

正文

这次开发,油猴脚本就可以满足我的需求:

  • 滚动到底部
  • 滚动回顶部
  • 阅读模式:自动滚动
  • 拖拽自定义位置

关于油猴脚本,在【油猴脚本】我给B站搜索加上了日期过滤已经介绍过了,这里不再赘述,如果有哪里表述不正确,麻烦在评论区指出,不胜感激。

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

1663859982(1).jpg

ok,进入下一步~

拖拽

现在实现拖拽是比较容易的了,只需要用HTML5的draggable属性和[dragend]事件,即可轻松解决。

  1. 把draggable属性设置为true,就可以让元素可拖动。
  2. 用鼠标点击可拖拽元素,将元素拖拽到指定位置,并释放鼠标按钮,就会触发dragend事件
  3. 从事件中获取元素所在位置,将其保存,并设置top、left

存在问题: 释放鼠标后,可以发现位置跟释放前的不太一样,是因为设置的top、left是以元素的左上角为准的,而在拖拽的时候,鼠标是在元素内距离左上角有一定的距离,所以正确的top、left要减去这段距离。但是我打印offsetX、offsetY都是0。这个问题有大佬解决过吗?麻烦支个招。

滚动

滚动到底部、滚动回顶部、自动滚动三个需求其实就是一个滚动的需求。

关于滚动的实现,网上有很多文章可以查阅,大体上是设置scrollTopscroll()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。

结语

媒体1_Trim.gif

整个脚本已经上传至greasyfork,欢迎大家下载使用,也可在github点个star。

前几天看到一个言论:科技使人变懒,还是懒促使科技的进步?

期待你在评论区留下看法。

分类:
前端
收藏成功!
已添加到「」, 点击更改