滚动条美化-仿macos

使得windows中浏览器的滚动条更加美观

目前為 2024-01-26 提交的版本,檢視 最新版本

// ==UserScript==
// @name         滚动条美化-仿macos
// @namespace    https://bbs.tampermonkey.net.cn/
// @version      1.0
// @description  使得windows中浏览器的滚动条更加美观
// @author       XboxYan、冰冻大西瓜
// @match        *://*/*
// @license      AGPL-3.0-or-later
// @grant        GM_addStyle
// ==/UserScript==

GM_addStyle(`
body{
  margin: 0;
  scrollbar-gutter: auto;
  background-color: transparent;
    
}
::-webkit-scrollbar{
  background-color: transparent;
  width: 12px;

}
::-webkit-scrollbar-thumb{
  background-color: transparent;
  border-radius: 8px;
  background-clip: content-box;
  border: 2px solid transparent;

}
body[scroll]::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover{
  background-color: rgba(0,0,0,.5);
}`)

window.addEventListener('scroll', function (ev) {
  document.body.toggleAttribute('scroll', true)
  this.timer && clearTimeout(this.timer)
  this.timer = setTimeout(() => {
    document.body.toggleAttribute('scroll')
  }, 800)
})