🎨 Perf: optimize the scroll bar style of body and toc-auto elements

CHANGELOG.md

@@ -5,11 +5,11 @@ All notable changes to this project will be documented in this file.
 
 ## v0.2.18
 
-## Breaking Updates
+## :boom: Breaking Updates
 
 - [#288](https://github.com/hugo-fixit/FixIt/pull/288)
 
-## What's New
+## :new: What's New
 
 > Snapshot: <>
 
@@ -28,6 +28,7 @@ All notable changes to this project will be documented in this file.
 - :wheelchair: Feat: add post update date to post meta ([#285](https://github.com/hugo-fixit/FixIt/issues/285)])
 - :art: Style: fix `#comments` css style conflict ([#269](https://github.com/hugo-fixit/FixIt/issues/269))
 - :art: Style: adjust the mobile header style and fix the bug that scrolling is invalid when there are too many menus on mobile ([#289](https://github.com/hugo-fixit/FixIt/issues/289))
+- :art: Perf: optimize the scroll bar style of body and toc-auto elements
 - :memo: Docs: refactor the theme documentation
 - :wrench: Chore: change the theme minimum supported Hugo versions above **0.89.0**
 - :arrow_up: Chore(libs):

assets/css/_core/_base.scss

@@ -43,8 +43,25 @@ html {
 body {
   background-color: $global-background-color;
   color: $global-font-color;
-  @include overflow-wrap(break-word);
   scrollbar-color: auto;
+  @include overflow-wrap(break-word);
+
+  &::-webkit-scrollbar {
+    width: 0.75rem;
+    height: 0.75rem;
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    background-clip: content-box;
+    border: 2px solid transparent;
+    @include border-radius(0.5rem);
+  }
+
+  &[data-scroll]::-webkit-scrollbar-thumb {
+    background-color: $scrollbar-color;
+  }
 
   &[data-theme='dark'] {
     color: $global-font-color-dark;

assets/css/_partials/_single/_toc.scss

@@ -87,6 +87,10 @@
   .toc-content {
     overflow-y: scroll;
     max-height: calc(100vh - #{2*$header-height});
+    
+    &::-webkit-scrollbar {
+      width: 0;
+    }
 
     &.always-active ul {
       display: block;

src/js/theme.js

@@ -1147,6 +1147,7 @@ class FixIt {
     const $fixedButtons = document.querySelector('.fixed-buttons');
     const $backToTop = document.querySelector('.back-to-top');
     const $readingProgressBar = document.querySelector('.reading-progress-bar');
+    let scrollTimer = void 0;
     if (document.body.dataset.headerDesktop === 'auto') {
       $headers.push(document.getElementById('header-desktop'));
     }
@@ -1165,6 +1166,12 @@ class FixIt {
       const $mask = document.getElementById('mask');
       this.newScrollTop = this.util.getScrollTop();
       const scroll = this.newScrollTop - this.oldScrollTop;
+      // body scrollbar style
+      document.body.toggleAttribute('data-scroll', true);
+      scrollTimer && window.clearTimeout(scrollTimer);
+      scrollTimer = window.setTimeout(() => {
+        document.body.toggleAttribute('data-scroll');
+      }, 500);
       // header animation
       this.util.forEach($headers, ($header) => {
         if (scroll > ACCURACY) {