影响页面流畅度，本博客主题已弃用

引入 css

新建一个 css 文件，然后再 butterfly 主题下的 _config.yml 文件中 inject 引入该文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 滚动条 */
*::-webkit-scrollbar{
  width: 8px;
  height: 8px;
}
 
*::-webkit-scrollbar-thumb{
  background: var(gray);
  border-radius: 8px;
  cursor:pointer;
}

*::-webkit-scrollbar-thumb:hover{
  opacity: 1;
  display: block!important;
}

*::-webkit-scrollbar-track{
  background-color: transparent;
}

html {
  overflow-y: overlay;
}

引入 js

新建一个 js 文件，然后再 butterfly 主题下的 _config.yml 文件中 inject 引入该文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//滚动条自动隐藏
var t1 = 0;
var t2 = 0;
var timer = null; 
document.styleSheets[0].addRule('*::-webkit-scrollbar-thumb','display:none;');

// scroll监听
document.onscroll = function() {
  clearTimeout(timer);
  timer = setTimeout(isScrollEnd, 1000);
  t1 = document.documentElement.scrollTop || document.body.scrollTop;
  document.styleSheets[0].addRule('*::-webkit-scrollbar-thumb','display:block;');
}

function isScrollEnd() {
  t2 = document.documentElement.scrollTop || document.body.scrollTop;
  if(t2 == t1){
    document.styleSheets[0].addRule('*::-webkit-scrollbar-thumb','display:none;');
  }
}