Tutorial Custom HTML Scrollbar

Discussion in 'HTML/CSS Tutorials' started by PhucedMODZ, Aug 15, 2017.

Tags:
  1. PhucedMODZ

    PhucedMODZ Trial Moderator Staff Member Donator

    178
    94
    313
    Credits:
    1,308
    Ever Wandered How Some Websites Have A Custom Scrollbar?

    Well Today Im Going To Show You How!

    So Lets Get Into It.

    First Open An IDE Of Your Choice (Notepad++, Sublime, Visual Studio Code, Or Just Notepad)

    Create A Document Called
    Code:
    sidebar.css
    Then Save It!

    Now Open The sidebar.css File And Add This To It

    Code:
    ::-webkit-scrollbar {
        width: 12px;
    }
    
    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color:#05a34e;
    }
    
    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
        background-color:#1e991e;
    }
    
    You May Change The
    Code:
    background-color:#1e991e;
    To Any Color You Want Providing Its In Either A HEX Format Or A RGB / RGBA Format.

    This Is What Hex Formatting Looks Like
    Code:
     #FF0000; //RED 

    This Is What RGB Formatting Looks Like
    Code:
     rgb(255, 0, 0); //RED 

    This Is What RGBA Formatting Looks Like
    Code:
     rgba(255, 0, 0, 0.3); //RED 

    Now Once You Have Added That To The
    Code:
    sidebar.css
    Save It!

    Now To Go Your Server / Website (FTP / File Manager)

    Create A Folder Called
    Code:
    sidebar
    Now Upload The File To Anywhere On Your Server / Website (FTP / File Manager)

    Now Add This To The Web Page You Want The Scrollbar To Show On

    Code:
    <link rel="stylesheet" href="sidebar/sidebar.css">
    Make Sure To Add It Anywhere Between

    Code:
     <head> 
    And

    Code:
     </head> 

    Now You Should Be Presented With Something Like This

    (My Website Has A Dark Grey & Green Colour Effect So I Made My Scrollbar Green)

    [​IMG]

    As You Can See, This Custom Scrollbar Tutorial Doesn't Just Change The Scrollbar On The Side!

    It Changes Any Scrollbar That Is On Your Web Page



    Well That's All For Today Guys,

    If You Have Any Questions Don't Hesitate To Contact Me
     
    Ganjanikos and CabCon like this.
  2. Tusta

    Tusta Head Member Donator

    20
    10
    14
    Credits:
    3,245
    Cool man!
     
    PhucedMODZ likes this.
  3. CabCon

    CabCon Head Administrator Staff Member Head Staff Team

    4,078
    2,670
    403
    Credits:
    193,380
    Nice tutorial! Thanks for creating it! :heart:
     
    PhucedMODZ likes this.
  4. Dylan57richem

    Dylan57richem Well-Known Member

    44
    28
    228
    Credits:
    737
    Thanks :grinning: One website for convert RGBA colors to HEX colors (and vice-versa) : Please login or register to view links or downloads!

    My website :smile:
    [​IMG]
     
    Last edited: Aug 23, 2017
    PhucedMODZ, CabCon and mikefawkes like this.
  5. mikefawkes

    mikefawkes Member

    44
    15
    28
    Credits:
    357
    verry nice :grinning: looks awesome
     
    PhucedMODZ likes this.
  6. PhucedMODZ

    PhucedMODZ Trial Moderator Staff Member Donator

    178
    94
    313
    Credits:
    1,308
    yeah check out vRice's source he made Please login or register to view links or downloads!
     
    CabCon likes this.

Share This Page