滚动条-新

为网页添加滚动条。
目前为 2023-05-01 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name        滚动条-新
// @namespace   https://gf.qytechs.cn/zh-CN/users/954189
// @version     1
// @description 为网页添加滚动条。
// @author      chatgpt
// @run-at      document-end
// @license     MIT
// @match       *://*/*
// ==/UserScript==



(function() {
    'use strict';

    // 创建滚动条 DOM 元素
    const theScrollBar = document.createElement("div");

    // 设置滚动条的 ID 和文本
    theScrollBar.id = "theScrollBar";
    theScrollBar.innerHTML = "▲<br>▼";

    // 设置滚动条样式
    theScrollBar.setAttribute(
      "style",
      "font-size:1.5vw ;width:6vw ;line-height:5vw ;display: none;text-align:center ;background-color:rgba(255,255,255) ;opacity: 0 ;box-shadow:0px 1px 5px rgba(0,0,0,0.2) ;color:#000 ;position:fixed ;top: -14vw;right:2vw ;z-index:999999 ;transition: opacity 0.2s ease-in-out; border-radius:1vw "
    );


    // 将滚动条元素添加到页面中
    document.body.appendChild(theScrollBar);

    // 存储文档高度和上次滚动位置
    let docHeight = null;
    let lastScrollTop = null;

    // 更新滚动条位置的函数
    function updateScrollBar() {
      // 获取当前的滚动位置
      const scrollTop =
        document.documentElement.scrollTop || document.documentElement.scrollTop;
  
      // 如果滚动位置改变了，重新计算滚动条位置
      if (scrollTop !== lastScrollTop) {
        const scrollBarTop =
          (scrollTop / docHeight) * (window.innerHeight - theScrollBar.clientHeight);
          if (scrollBarTop < 0) {
            theScrollBar.style.top = "0";
          }
          else if (scrollBarTop + theScrollBar.clientHeight > window.innerHeight) {
            theScrollBar.style.top = `${window.innerHeight - theScrollBar.clientHeight}px`;
            docHeight = document.documentElement.scrollHeight - window.innerHeight;
          }
          else {
            theScrollBar.style.top = `${scrollBarTop}px`;
          }
        lastScrollTop = scrollTop;
      }
      
      // 使用 requestAnimationFrame 函数，优化渲染性能
      window.requestAnimationFrame(updateScrollBar);
    }

    // 添加 touchstart 事件监听器，当用户在手机上开始触摸屏幕时触发
    window.addEventListener("touchstart", function () {
      //如果文档内容不够长，不需要添加滚动条
      if (document.documentElement.scrollHeight <= window.innerHeight * 2) {
        return;
      }

      // 显示计算文档高度，并开始更新滚动条位置
      docHeight = document.documentElement.scrollHeight - window.innerHeight;
      updateScrollBar();
     });
    

    // 定义一些与触摸事件相关的变量
    let startOffset = null;

    // 滚动条开始滚动时触发的函数
    function startScroll(event) {
      event.preventDefault();
      event.stopPropagation();
      startOffset = event.changedTouches[0].clientY - parseInt(theScrollBar.style.top);
    }
    
    
    // 滚动条正在滚动时触发的函数
    function scrolling(event) {
      event.preventDefault();
      event.stopPropagation();
      // 计算当前滚动条的位置和滑动距离，并更新滚动位置和滚动条位置
      const currentY = event.changedTouches[0].clientY;
      const scrollBarTop = currentY - startOffset;
      if (scrollBarTop < 0) {
        theScrollBar.style.top = "0px";
      } else if (scrollBarTop > window.innerHeight - theScrollBar.clientHeight) {
        theScrollBar.style.top = `${window.innerHeight - theScrollBar.clientHeight}px`;
        docHeight = document.documentElement.scrollHeight - window.innerHeight;
      } 
      else {
            theScrollBar.style.top = `${scrollBarTop}px`;
      }
      const scrollTop =
        (scrollBarTop / (window.innerHeight - theScrollBar.clientHeight)) * docHeight;
      document.documentElement.scrollTop = scrollTop;
    }

    // 为滚动条添加触摸事件监听器
    theScrollBar.addEventListener("touchstart", startScroll, { passive: false });
    theScrollBar.addEventListener("touchmove", scrolling, { passive: false });
    
    // 停止滚动2秒后隐藏
    let timer;
    window.addEventListener("scroll", function () {
      clearTimeout(timer);
      theScrollBar.style.opacity = "0.8";
      theScrollBar.style.display = "block";
      timer = setTimeout(() => {
        theScrollBar.style.opacity = "0";
        setTimeout(function(){
          theScrollBar.style.display = "none";
        }, 200);
      }, 1800);
    });

})();
欢迎访问Greasy Fork镜像
