迷你滚动条(Mini ScrollBar)

滚动条迷你化.(Make scroll bar mini.)

  1. // ==UserScript==
  2. // @name 迷你滚动条(Mini ScrollBar)
  3. // @namespace https://gf.qytechs.cn/zh-CN/users/104201
  4. // @version 0.4
  5. // @description 滚动条迷你化.(Make scroll bar mini.)
  6. // @author 黄盐
  7. // @include *
  8. // @run-at document-start
  9. // @compatible chrome
  10. // @grant none
  11. // ==/UserScript==
  12. ;
  13. (function() {
  14. 'use strict';
  15. const scrollbarWidth = 8,
  16. thumbBorderWidth = 1,
  17. thumbBorderColor = "rgba(255, 255, 255, 0.4)",
  18. scrollbarMouseOverColor = 'rgba(128, 128, 128, 0.2)',
  19. thumbColor = 'rgba(0, 0, 0, 0.4)',
  20. thumbMouseOverColor = 'rgba(0, 0, 0, 0.8)';
  21. const cssText =`
  22. ::-webkit-scrollbar{
  23. width: ${scrollbarWidth}px !important;
  24. height: ${scrollbarWidth}px !important;
  25. background:transparent;
  26. filter: invert();
  27. }
  28. ::-webkit-scrollbar:hover {
  29. background: ${scrollbarMouseOverColor};
  30. }
  31. ::-webkit-scrollbar-thumb {
  32. border: ${thumbBorderWidth}px solid ${thumbBorderColor} !important;
  33. background-color: ${thumbColor} !important;
  34. z-index: 2147483647;
  35. -webkit-border-radius: 12px;
  36. background-clip: content-box;
  37. }
  38. ::-webkit-scrollbar-corner {
  39. background: rgba(255, 255, 255, 0.3);
  40. border: 1px solid transparent
  41. }
  42. ::-webkit-scrollbar-thumb:hover {
  43. background-color: ${thumbMouseOverColor} !important;
  44. }
  45. ::-webkit-scrollbar-thumb:active {
  46. background-color: rgba(0, 0, 0, 0.6) !important
  47. }
  48. `;
  49. function GMaddStyle(css) {
  50. let a = document.createElement('style'),doc;
  51. a.textContent = '<!--\n' + css + '\n-->';
  52. if (location.origin === "file://") {
  53. doc = document.head || document.documentElement;
  54. } else {
  55. doc = document.body || document.documentElement;
  56. }
  57. doc.appendChild(a);
  58. }
  59. GMaddStyle(cssText);
  60.  
  61. })();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址