Skip to content
99techspot logo
  • Make Money
  • Whatsapp
  • Facebook
  • Instagram
  • Interenet
  • Android Apps
  • Computer Tricks
99techspot logo

Top 5 Stylish Website Scroll Bar Design For Site

Posted onJune 11, 2022May 9, 2020 Updated May 9, 2020

Top 5 stylish scroll bar design for website ke bare me batunga. Agar aap apne blog website ko beautiful design dena chahte hai.

Is post me aapko stylish website scroll bar css style ya website scroll bar design ke bare me batane wala hu. joke bahut hi responsive fast speed Aur stylish scroll bar hai jo high speed scrolling karte hai.

 

scrollbar for website

Actually hamre Blog website par jo reader athe hai. Wo sabse phale Blog desgin ko sabse phale dekte hai. Taki unhe blog article ko read karne me assni ho. yeah bat sayad apko bi pata hi hogi.

Jis blog ka design smoth aur attractive hota hai ushe reader ushe Utna hi Like karenge. To athe hai apne topic par. How to customize website scroll bar design using css

विषय-सूची

  • 1 How To Customize website Scroll bar Using Css
  • 2 5 Website Stylish scrollbar design css:-
  • 3 Scroll bar Design 2.
  • 4 Scrollbar Design 4.
  • 5 scroll bar Design 5.

How To Customize website Scroll bar Using Css

Blog website me scroll bar customize kaise kare ye bahut asan hai. Aap sirf step by step article ko follow kare.

How to Change website scroll bar Using Css 

1. Sabse phale Apne Blogger dashboard me jaye ab.
2. Go to theme >>edit html per click kariye.
4. Now press Ctrl+f Are search box me ]]></b:skin> type kare.
5. ]]></b:skin> ke Uper code Niche diye gaye css code ko paste kar de.

Add css on blogger

Finally Uske bad aapke Blog website ka scrollbar customize ho jayega.

5 Website Stylish scrollbar design css:-

scrollbar design css

::-webkit-scrollbar{ width: 11px; } ::-webkit-scrollbar-track{ background: #c4c6c8; } ::-webkit-scrollbar-thumb{ background: #46c1ea; border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4); } ::-webkit-scrollbar-thumb:vertical:hover, ::-webkit-scrollbar-thumb:horizontal:hover{ background: #007757; }

Scroll bar Customization

  1. Touch background color#c4c6c8
  2. horizontal background color #007757
  3. Ap apne choice se color ko change kar sakte hai.

Scroll bar Design 2.

scrollbar design css

::-webkit-scrollbar { width: 11px; height: auto; } ::-webkit-scrollbar-track { border-radius: 10px; box-shadow: inset 0 0 8px #00B141; } ::-webkit-scrollbar-thumb { background: yellowgreen; border-radius: 10px; box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } ::-webkit-scrollbar-thumb:hover { background: green; } ::-webkit-scrollbar-thumb:active { background: #000000; }

Scrollbar Customization

agar aap scrollbar ka color change karna chahte hai to apko color ke code ko badlna hoga. Are ap apni pasand ke color ko chose kar sakte hai. color code is parkar ka hai for example #000000 something

Scrollbar design 3.

scrollbar design css

::-webkit-scrollbar { width: 11px; height: auto; } ::-webkit-scrollbar-thumb { background: #0080ff; border: 0px none #ffffff; border-radius: 50px; background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #52d352), color-stop(0.73, #4a944b), color-stop(0.53, #2e7c2f), color-stop(0.28, #2c7a2d), color-stop(0.00, #7cff7f)); background: -webkit-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%); background: -moz-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%); background: -o-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%); background: -ms-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%); background: linear-gradient(to bottom, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%); } ::-webkit-scrollbar-thumb:hover { background: #008542; } ::-webkit-scrollbar-thumb:active { background: #004522; } ::-webkit-scrollbar-track { background: #e2e2e2; } ::-webkit-scrollbar-corner { background: transparent; }

Scrollbar Customization

Agar aap scroll bar ka color change karna chate hai to apko color ke code ko badlna hoga. Are ap apni passand ke color ko chosse kar sakte hai. color code is parkar ka hai for example #000000 something

Scrollbar Design 4.

scrollbar design css

/*—–Custom ScrollBar By Hackintricks4u.blogspot.com—*/ ::-webkit-scrollbar{width:12px;height:8px} ::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,0.3);background:#ffffff} ::-webkit-scrollbar-thumb{background: rgba(43,22,22,0.8);-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5)} ::-webkit-scrollbar-thumb:window-inactive{background:rgba(43,22,22,0.4)}

Scrollbar Customization

Agar aap scroll bar ka color change karna chate hai to apko color ke code ko badlna hoga. Are ap apni pasand ke color ko chose kar sakte hai. color code is parkar ka hai for example #000000 something

scroll bar Design 5.

scrollbar design css

::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { border-radius: 10px; } ::-webkit-scrollbar-thumb { background-color: #ecf400; background: #BA8B02; background: -webkit-linear-gradient(to right, #181818, #BA8B02); background: linear-gradient(to right, #181818, #BA8B02); } ::-webkit-scrollbar-thumb:hover { background: #333; } ::-webkit-scrollbar-thumb:active { background: #000000; }

Scrollbar Customization

Agar aap scroll bar ka color change karna chate hai to apko color ke code ko badlna hoga. Are ap apni passand ke color ko chosse kar sakte hai. color code is parkar ka hai for example #000000 something

I hope apko blog website ke liye  best best scrollbar css style for blog website article acha laga hoga to is post ko social media per jarur share kare.

Agar apko stylish website scroll bar css style for blog website me add karne me khoi problem ho to hame comment karke bataye.

Are agar aap Hamare article ke notification apne Email per chate hai to hame newsletter duwara subscribe Kare. Taki apko notification milte rhe.

Read also

    • Stylish Blogger Recent Post Widget For Blog Website
    • Stylish Blogger Recent Post Widget For Blog Website
    • 1000+ TOP Facebook Stylish Names List For Girls OR Boys

Post navigation

Previous Previous
कमर दर्द का रामबाण इलाज कारण और लक्षण
NextContinue
1000+ Pubg Whatsapp Group Link 2022

Latest Tech update :-


  1. How To Make Free Money On Google Pay 2022
  2. Online Paise Kaise Kamaye [15 Tarike ] Make Money Online In Hindi
  3. 5000+ Active Sub4Sub Whatsapp Group Link 2022
  4. 10+ Best Instagram Follower badhane Wala Apps 2022
  5. [500+] Comment For Boys Pic On FB Instagram Facebook
  6. 5 Best Online Paise Kamane Ke Tarike
  • Contact us
  • About us
  • Advertisement
  • Guest Post
  • Privacy Policy
  • About Author
Scroll to top
  • Make Money
  • Whatsapp
  • Facebook
  • Instagram
  • Interenet
  • Android Apps
  • Computer Tricks
Search