滚动条

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


function createScrollBar() {
  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.clientHeight * document.documentElement.scrollHeight;
    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:4vw ;width:8vw ;line-height:8vw ;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 theTop = ( nowScrollTop/document.documentElement.scrollHeight ) * document.documentElement.clientHeight;
    scrollBar.style.top = theTop + "px";
    whereScroll = requestAnimationFrame(updateScrollBarPosition);
  }
  
};
createScrollBar();
欢迎访问Greasy Fork镜像
