☰

滚动条

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

当前为 2023-04-14 提交的版本，查看 最新版本。

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