滚动条

Greasy Fork is available in English.
为网页添加滚动条。找不到作者。年久失修，修修补补再上岗，顺便改了不合理的地方。
当前为 2023-04-05 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name        滚动条
// @namespace  http://greasyfork.icu/zh-CN/users/954189
// @version      2.0.1
// @description  为网页添加滚动条。找不到作者。年久失修，修修补补再上岗，顺便改了不合理的地方。
// @author       ？？？
// @run-at       document-end
// @license      MIT
// @match        *
// ==/UserScript==


  var isScrollBar,startY,endY,whereScroll,clearScrollBar;
  var clientHeight = document.documentElement.scrollHeight;
  var scrollTop = document.documentElement.scrollTop;
  isScrollBar = document.getElementById('theScrollBar');

  if (isScrollBar) {
    isScrollBar.parentNode.removeChild(isScrollBar);
  };

  var theScrollBar = document.createElement("div");
  theScrollBar.id = "theScrollBar";
  theScrollBar.addEventListener("touchstart",function (e) {
    e.stopPropagation();
    e.preventDefault();
    if ( clearScrollBar ) {
      clearTimeout( clearScrollBar );
    };
    return startY = e.changedTouches[0].clientY - parseFloat(this.style.top);
  },true);

  theScrollBar.addEventListener("touchmove",function (e) {
    e.stopPropagation();
    e.preventDefault();
    if ( clearScrollBar ) {
      clearTimeout( clearScrollBar );
    };
    endY = e.changedTouches[0].clientY;
    var theTop = endY - startY;
    this.style.top = theTop + "px";
    thePageTop = theTop * (document.documentElement.scrollHeight - document.documentElement.clientHeight) / (document.documentElement.clientHeight - this.offsetHeight);
    window.scrollTo(0,thePageTop);
  },true);

  theScrollBar.addEventListener("touchend",function (e) {
    e.stopPropagation();
    e.preventDefault();
    clearScrollBar = setTimeout(function () {
      if ( whereScroll ) {
        clearInterval(whereScroll);
      };
      that.style.display = "none";
    },3000);
    return clearScrollBar;
  },true);

  theScrollBar.innerHTML = "▲<br>▼";
  theScrollBar.setAttribute("style","font-size:2vw ;width:7vw ;line-height:6vw ;text-align:center ;background-color:rgba(255,255,255,0.7) ;box-shadow:0px 1px 5px rgba(0,0,0,0.2) ;color:#000 ;position:fixed ;top:" + scrollTop + "px;right:1vw ;z-index:999999 ;transform: translateZ(0);border-radius:1vw ");
  theScrollBar.style.display = 'none'
  document.body.appendChild(theScrollBar);

  document.ontouchmove = function () {
    if ( clearScrollBar ) {
      clearTimeout( clearScrollBar );
    };
    var scrollBar = document.getElementById('theScrollBar');
    scrollBar.style.display = "block";
    if ( !whereScroll ) {
      whereScroll = requestAnimationFrame(updateScrollBarPosition);
    };
  };



  document.ontouchstart = function () {
   if ( whereScroll ) {
     cancelAnimationFrame(whereScroll);
   };
   whereScroll = requestAnimationFrame(updateScrollBarPosition);
  };

  document.ontouchend = function () {
   var scrollBar = document.getElementById('theScrollBar');
   clearScrollBar = setTimeout(function () {
     scrollBar.style.display = "none";
     if ( whereScroll ) {
       cancelAnimationFrame(whereScroll);
     };
   },3000);
   return clearScrollBar;
  };
  
  
  
  function updateScrollBarPosition() {
    var scrollBar = document.getElementById('theScrollBar');
    var nowScrollTop = document.documentElement.scrollTop;
    var scrollBarHeight = scrollBar.offsetHeight;
    var maxTop = document.documentElement.clientHeight - scrollBarHeight;
    var theTop = ( nowScrollTop / (document.documentElement.scrollHeight - document.documentElement.clientHeight) ) * maxTop;
    scrollBar.style.top = theTop + "px";
    whereScroll = requestAnimationFrame(updateScrollBarPosition);
  }