diff --git a/assets/css/_core/_base.scss b/assets/css/_core/_base.scss
index 300306f3..e17b9d68 100644
--- a/assets/css/_core/_base.scss
+++ b/assets/css/_core/_base.scss
@@ -17,21 +17,6 @@ html {
   }
 }
 
-/* scrollbar, only support webkit */
-::-webkit-scrollbar {
-  width: 0.5rem;
-  height: 0.5rem;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: $scrollbar-color;
-  @include border-radius($global-border-radius);
-
-  &:hover {
-    background-color: $scrollbar-hover-color;
-  }
-}
-
 ::selection {
   background-color: $selection-color;
 
@@ -43,26 +28,8 @@ html {
 body {
   background-color: $global-background-color;
   color: $global-font-color;
-  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;
     background-color: $global-background-color-dark;
@@ -89,6 +56,7 @@ abbr[title] {
 
 @include link(true, true);
 
+@import '../_partials/scrollbar';
 @import '../_partials/mask';
 @import '../_partials/img';
 @import '../_partials/icon';
diff --git a/assets/css/_core/_header.scss b/assets/css/_core/_header.scss
index 85718532..6eb8f182 100644
--- a/assets/css/_core/_header.scss
+++ b/assets/css/_core/_header.scss
@@ -366,14 +366,11 @@ header {
       overflow-y: overlay;
       max-height: 70vh;
       @include box-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.1));
+      @include scrollbar-width(none, 0);
 
       [data-theme='dark'] & {
         @include box-shadow(0 0.125rem 0.25rem rgba(255, 255, 255, 0.1));
       }
-      
-      &::-webkit-scrollbar {
-        width: 0;
-      }
 
       .search-wrapper {
         display: flex;
diff --git a/assets/css/_core/_root.scss b/assets/css/_core/_root.scss
index bed29dd5..dd4af56d 100644
--- a/assets/css/_core/_root.scss
+++ b/assets/css/_core/_root.scss
@@ -15,6 +15,13 @@
   // hr style
   --#{$prefix}hr-background-color: #{darken($global-border-color, 5%)};
   --#{$prefix}hr-before-color: #{lighten($single-link-hover-color, 4%)};
+
+  // Scrollbar related variables
+  --#{$prefix}scrollbar-thumb-color: #{$scrollbar-color};
+  --#{$prefix}scrollbar-thumb-hover-color: #{$scrollbar-hover-color};
+  --#{$prefix}scrollbar-track-color: transparent;
+  --#{$prefix}scrollbar-width: thin;
+  --#{$prefix}scrollbar-width-legacy: 12px;
 }
 
 // Dark theme
diff --git a/assets/css/_mixin/_index.scss b/assets/css/_mixin/_index.scss
index 815d18c0..2ce7d64a 100644
--- a/assets/css/_mixin/_index.scss
+++ b/assets/css/_mixin/_index.scss
@@ -2,4 +2,5 @@
 @import '_link';
 @import '_blur';
 @import '_details';
+@import '_scrollbar-width';
 @import '_z-index';
diff --git a/assets/css/_mixin/_scrollbar-width.scss b/assets/css/_mixin/_scrollbar-width.scss
new file mode 100644
index 00000000..82fbf7c4
--- /dev/null
+++ b/assets/css/_mixin/_scrollbar-width.scss
@@ -0,0 +1,4 @@
+@mixin scrollbar-width($width: thin, $widthLegacy: 12px) {
+  --#{$prefix}scrollbar-width: #{$width};
+  --#{$prefix}scrollbar-width-legacy: #{$widthLegacy};
+}
diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss
index 9ce47f98..1b50a309 100644
--- a/assets/css/_page/_single.scss
+++ b/assets/css/_page/_single.scss
@@ -258,13 +258,10 @@
 
     .table-wrapper {
       overflow-x: auto;
+      --#{$prefix}scrollbar-thumb-color: #{$table-background-color};
 
-      &::-webkit-scrollbar {
-        background-color: $table-background-color;
-
-        [data-theme='dark'] & {
-          background-color: $table-background-color-dark;
-        }
+      [data-theme='dark'] & {
+        --#{$prefix}scrollbar-thumb-color: #{$table-background-color-dark};
       }
 
       > table {
diff --git a/assets/css/_partials/_scrollbar.scss b/assets/css/_partials/_scrollbar.scss
new file mode 100644
index 00000000..b50e82e1
--- /dev/null
+++ b/assets/css/_partials/_scrollbar.scss
@@ -0,0 +1,36 @@
+/* Modern browsers with `scrollbar-*` support (high priority) */
+@supports (scrollbar-width: auto) {
+  * {
+    scrollbar-color: var(--#{$prefix}scrollbar-thumb-color) var(--#{$prefix}scrollbar-track-color);;
+    scrollbar-width: var(--#{$prefix}scrollbar-width);
+  }
+}
+
+/* Legacy browsers with `::-webkit-scrollbar-*` support */
+::-webkit-scrollbar {
+  height: var(--#{$prefix}scrollbar-width-legacy);
+  width: var(--#{$prefix}scrollbar-width-legacy);
+  overflow: visible;
+}
+::-webkit-scrollbar-button {
+  height: 0;
+  width: 0;
+}
+::-webkit-scrollbar-corner {
+  background-color: var(--#{$prefix}scrollbar-track-color);
+}
+::-webkit-scrollbar-thumb {
+  background-color: var(--#{$prefix}scrollbar-thumb-color);
+  &:hover {
+    background-color: var(--#{$prefix}scrollbar-thumb-hover-color);
+  }
+}
+::-webkit-scrollbar-track {
+  background-color: var(--#{$prefix}scrollbar-track-color);
+}
+::-webkit-scrollbar-thumb,
+::-webkit-scrollbar-track {
+  background-clip: padding-box;
+  border: 3px solid transparent;
+  border-radius: 100px;
+}
diff --git a/assets/css/_partials/_single/_code.scss b/assets/css/_partials/_single/_code.scss
index 49c762d7..03dc239f 100644
--- a/assets/css/_partials/_single/_code.scss
+++ b/assets/css/_partials/_single/_code.scss
@@ -348,12 +348,16 @@ pre:not(.mermaid[data-processed='true']) {
   }
 
   .table-wrapper {
-    .highlight,
-    &::-webkit-scrollbar {
-      background-color: #f6f8fa;
+    --#{$prefix}scrollbar-thumb-color: #{$code-background-color};
+
+    [data-theme='dark'] & {
+      --#{$prefix}scrollbar-thumb-color: #{$code-background-color-dark};
+    }
+    .highlight {
+      background-color: $code-background-color;
 
       [data-theme='dark'] & {
-        background-color: #2d333b;
+        background-color: $code-background-color-dark;
       }
     }
   }
diff --git a/assets/css/_partials/_single/_collections.scss b/assets/css/_partials/_single/_collections.scss
index 67c289ee..f8212bdf 100644
--- a/assets/css/_partials/_single/_collections.scss
+++ b/assets/css/_partials/_single/_collections.scss
@@ -161,10 +161,7 @@
       list-style: none;
       overflow-y: scroll;
       max-height: 60vh;
-
-      &::-webkit-scrollbar {
-        width: 0;
-      }
+      @include scrollbar-width(none, 0);
 
       .collection-item > a::before,
       .collection-item > span::before {
diff --git a/assets/css/_partials/_single/_toc.scss b/assets/css/_partials/_single/_toc.scss
index 6a53f7e2..bca5bd41 100644
--- a/assets/css/_partials/_single/_toc.scss
+++ b/assets/css/_partials/_single/_toc.scss
@@ -111,10 +111,7 @@
   .toc-content {
     overflow-y: scroll;
     max-height: calc(100vh - #{2*$header-height});
-    
-    &::-webkit-scrollbar {
-      width: 0;
-    }
+    @include scrollbar-width(none, 0);
 
     &.always-active ul,
     &.always-active ol {
diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss
index e32c937b..d9244983 100644
--- a/assets/css/_variables.scss
+++ b/assets/css/_variables.scss
@@ -45,10 +45,10 @@ $global-border-color-dark: #363636 !default;
 
 // ========== Scrollbar ========== //
 // Color of the scrollbar
-$scrollbar-color: #87878d !default;
+$scrollbar-color: #a6a6a6 !default;
 
 // Color of the hover scrollbar
-$scrollbar-hover-color: #b1b1ba !default;
+$scrollbar-hover-color: #7d7d7d !default;
 // ========== Scrollbar ========== //
 
 // ========== Selection ========== //
diff --git a/assets/js/theme.js b/assets/js/theme.js
index d28d779c..77999573 100644
--- a/assets/js/theme.js
+++ b/assets/js/theme.js
@@ -1088,7 +1088,6 @@ 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'));
     }
@@ -1107,12 +1106,6 @@ 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) {
diff --git a/assets/lib/aplayer/dark.scss b/assets/lib/aplayer/dark.scss
index ca56d154..9cf993eb 100644
--- a/assets/lib/aplayer/dark.scss
+++ b/assets/lib/aplayer/dark.scss
@@ -48,14 +48,6 @@
   .aplayer-list {
     background-color: #212121;
 
-    &::-webkit-scrollbar-thumb {
-      background-color: #999;
-    }
-
-    &::-webkit-scrollbar-thumb:hover {
-      background-color: #bbb;
-    }
-
     li {
       color: #fff;
       border-top-color: #666;