Skip to content

Instantly share code, notes, and snippets.

@spemer

spemer/customize-scrollbar.css

Last active May 16, 2025 20:21
Show Gist options
  • Save spemer/a0e218bbb45433bd611e68446523a00b to your computer and use it in GitHub Desktop.
Save spemer/a0e218bbb45433bd611e68446523a00b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. spemer revised this gist Jul 22, 2021. No changes.
  2. spemer revised this gist Aug 25, 2020. 1 changed file with 9 additions and 7 deletions.
    16 changes: 9 additions & 7 deletions customize-scrollbar.css
    View file
    Original file line number Diff line number Diff line change
    @@ -3,21 +3,23 @@ Not supports in Firefox and IE */

    /* total width */
    body::-webkit-scrollbar {
    background-color:#fff;
    width:16px
    background-color: #fff;
    width: 16px;
    }

    /* background of the scrollbar except button or resizer */
    body::-webkit-scrollbar-track {
    background-color:#fff
    background-color: #fff;
    }

    /* scrollbar itself */
    body::-webkit-scrollbar-thumb {
    background-color:#babac0;
    border-radius:16px;
    border:4px solid #fff
    background-color: #babac0;
    border-radius: 16px;
    border: 4px solid #fff;
    }

    /* set button(top and bottom of the scrollbar) */
    body::-webkit-scrollbar-button {display:none}
    body::-webkit-scrollbar-button {
    display:none;
    }
  3. spemer revised this gist Jan 5, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion customize-scrollbar.css
    View file
    Original file line number Diff line number Diff line change
    @@ -7,7 +7,7 @@ body::-webkit-scrollbar {
    width:16px
    }

    /* background of the scrollbar */
    /* background of the scrollbar except button or resizer */
    body::-webkit-scrollbar-track {
    background-color:#fff
    }
  4. spemer revised this gist Jan 5, 2018. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions customize-scrollbar.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,6 @@
    /* Customize website's scrollbar like Mac OS
    Not supports in Firefox and IE */

    /* total width */
    body::-webkit-scrollbar {
    background-color:#fff;
  5. spemer revised this gist Jan 5, 2018. 1 changed file with 14 additions and 3 deletions.
    17 changes: 14 additions & 3 deletions customize-scrollbar.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,20 @@
    /* total width */
    body::-webkit-scrollbar {
    background-color:#fff;width:16px
    background-color:#fff;
    width:16px
    }

    /* background of the scrollbar */
    body::-webkit-scrollbar-track {
    background-color:#fff
    }

    /* scrollbar itself */
    body::-webkit-scrollbar-thumb {
    background-color:#babac0;border-radius:16px;border:4px solid #fff;
    }
    background-color:#babac0;
    border-radius:16px;
    border:4px solid #fff
    }

    /* set button(top and bottom of the scrollbar) */
    body::-webkit-scrollbar-button {display:none}
  6. spemer created this gist Jan 5, 2018.
    9 changes: 9 additions & 0 deletions customize-scrollbar.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    body::-webkit-scrollbar {
    background-color:#fff;width:16px
    }
    body::-webkit-scrollbar-track {
    background-color:#fff
    }
    body::-webkit-scrollbar-thumb {
    background-color:#babac0;border-radius:16px;border:4px solid #fff;
    }