简易自动隐藏滚动条

方案一、通过宽度控制

代码如下

1
2
3
4
/* 隐藏滚动条样式 */
::-webkit-scrollbar {
  width: var(--scrollbar-width, 0px);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let scrollTimeout;

window.addEventListener('DOMContentLoaded', () => {
  hideScrollbar();
});

window.addEventListener('scroll', () => {
  showScrollbar();
  clearTimeout(scrollTimeout);
  scrollTimeout = setTimeout(hideScrollbar, 1500);
});

function hideScrollbar() {
  document.documentElement.style.setProperty('--scrollbar-width', '0');
}

function showScrollbar() {
  document.documentElement.style.setProperty('--scrollbar-width', '6px');
}

方案二、通过颜色控制

代码如下

1
2
3
4
5
/* 隐藏滚动条样式 */
:root {
  --scrollbar-color: var(--scrollbar-color-thumb, rgba(0, 0, 0, 0));
  --global-bg: var(--global-color-thumb, var(--anzhiyu-background));
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
let scrollTimeout;

window.addEventListener('DOMContentLoaded', () => {
  hideScrollbar();
});

window.addEventListener('scroll', () => {
  showScrollbar();
  clearTimeout(scrollTimeout);
  scrollTimeout = setTimeout(hideScrollbar, 1500);
});

function hideScrollbar() {
  document.documentElement.style.setProperty('--scrollbar-color-thumb', 'rgba(0, 0, 0, 0)');
  document.documentElement.style.setProperty('--global-color-thumb', 'var(--anzhiyu-background)');
}

function showScrollbar() {
  document.documentElement.style.setProperty('--scrollbar-color-thumb', '#f7c6f2');
  document.documentElement.style.setProperty('--global-color-thumb', '#f771e8');
}

#f7c6f2的位置是滚动滑块的颜色，#f771e8是滚动轨道的颜色，自行设置