☰

滚动条

为网页添加滚动条。找不到原作者。年久失修，修修补补再上岗，顺便改了很多不合理的地方。

  1. // ==UserScript==
  2. // @name        滚动条
  3. // @namespace  https://greasyfork.org/zh-CN/users/954189
  4. // @version      2.1.2
  5. // @description  为网页添加滚动条。找不到原作者。年久失修，修修补补再上岗，顺便改了很多不合理的地方。
  6. // @author       ？？？
  7. // @run-at       document-end
  8. // @license      MIT
  9. // @match        *://*/*
  10. // ==/UserScript==
  11.  
  12.  
  13. function createScrollBar() {
  14.   let isScrollBar;
  15.   let whereScroll;
  16.   let clearScrollBar;
  17.   const clientHeight = document.documentElement.scrollHeight;
  18.   const scrollTop = document.documentElement.scrollTop;
  19.  
  20.   isScrollBar = document.getElementById('theScrollBar');
  21.  
  22.   if (isScrollBar) {
  23.     isScrollBar.parentNode.removeChild(isScrollBar);
  24.   };
  25.  
  26.   const theScrollBar = document.createElement("div");
  27.   theScrollBar.id = "theScrollBar";
  28.   theScrollBar.innerHTML = "▲<br>▼";
  29.  
  30.   theScrollBar.addEventListener("touchstart",function (e) {
  31.     e.stopPropagation();
  32.     e.preventDefault();
  33.     if (clearScrollBar) {
  34.       clearTimeout(clearScrollBar);
  35.     };
  36.     return startY = e.changedTouches[0].clientY - parseFloat(this.style.top);
  37.   },true);
  38.  
  39.   theScrollBar.addEventListener("touchmove", function(e) {
  40.     e.stopPropagation();
  41.     e.preventDefault();
  42.     if (clearScrollBar) {
  43.       clearTimeout(clearScrollBar);
  44.     };
  45.     endY = e.changedTouches[0].clientY;
  46.     const theTop = endY - startY;
  47.     this.style.top = theTop + "px";
  48.     const thePageTop = theTop * (document.documentElement.scrollHeight - document.documentElement.clientHeight) / (document.documentElement.clientHeight - this.offsetHeight);
  49.     window.scrollTo(0, thePageTop);
  50.     whereScroll = window.requestAnimationFrame(updateScrollBarPosition);
  51.   }, true);
  52.  
  53.   theScrollBar.addEventListener("touchend",function (e) {
  54.     e.stopPropagation();
  55.     e.preventDefault();
  56.     clearScrollBar = setTimeout(function () {
  57.       if (whereScroll) {
  58.         clearInterval(whereScroll);
  59.       };
  60.       setTimeout(function() {
  61.          scrollBar.style.display = "none";
  62.       }, 200);
  63.       scrollBar.style.opacity = "0";
  64.     },1800);
  65.     return clearScrollBar;
  66.   },true);
  67.  
  68.   theScrollBar.setAttribute("style","font-size:2vw ;width:7vw ;line-height:6vw ;text-align:center ;background-color:rgba(255,255,255) ;opacity: 0.8 ;box-shadow:0px 1px 5px rgba(0,0,0,0.2) ;color:#000 ;position:fixed ;top:" + scrollTop + "px;right:1vw ;z-index:999999 ;transition: opacity 0.2s ease-in-out;transform: translateZ(0);border-radius:1vw ");
  69.   theScrollBar.style.display = 'none';
  70.   document.body.appendChild(theScrollBar);
  71.  
  72.   window.onscroll = function() {
  73.     if (clearScrollBar) {
  74.       clearTimeout(clearScrollBar);
  75.     }
  76.     clearScrollBar = setTimeout(function() {
  77.       const scrollBar = document.getElementById('theScrollBar');
  78.       setTimeout(function() {
  79.          scrollBar.style.display = "none";
  80.       }, 200);
  81.       scrollBar.style.opacity = "0";
  82.     }, 1800);
  83.   }
  84.  
  85.   function updateScrollBarPosition() {
  86.     const scrollBar = document.getElementById('theScrollBar');
  87.     const nowScrollTop = document.documentElement.scrollTop;
  88.     const scrollBarHeight = scrollBar.offsetHeight;
  89.     const maxTop = document.documentElement.clientHeight - scrollBarHeight;
  90.     const theTop = ( nowScrollTop / (document.documentElement.scrollHeight - document.documentElement.clientHeight) ) * maxTop;
  91.     scrollBar.style.top = theTop + "px";
  92.     whereScroll = window.requestAnimationFrame(updateScrollBarPosition);
  93.   }
  94.  
  95.   document.ontouchmove = function () {
  96.     if ( clearScrollBar ) {
  97.       clearTimeout(clearScrollBar);
  98.     };
  99.     const scrollBar = document.getElementById('theScrollBar');
  100.     if (document.body.scrollHeight < 2 * window.innerHeight) {
  101.       setTimeout(function() {
  102.          scrollBar.style.display = "none";
  103.       }, 200);
  104.       scrollBar.style.opacity = "0";
  105.     }
  106.     else {
  107.       setTimeout(function() {
  108.          scrollBar.style.display = "block";
  109.       }, 200);
  110.       scrollBar.style.opacity = "0.8";
  111.     }
  112.     if (!whereScroll) {
  113.       whereScroll = requestAnimationFrame(updateScrollBarPosition);
  114.     };
  115.   };
  116.  
  117.   document.ontouchstart = function () {
  118.    if (whereScroll) {
  119.      cancelAnimationFrame(whereScroll);
  120.    };
  121.    whereScroll = requestAnimationFrame(updateScrollBarPosition);
  122.   };
  123. };
  124.  
  125. createScrollBar();