CSS Tutorial : How to hide selected scrollbar on web pages

This post based the question/comment of +Nauman Afzal Zia In the related article : How to remove scrollbar in your blog/site pages.

“Hi! This was really helpful. I am actually making a Survey from Google Doc. I got its code and embed it on my blog. Now there were two scroll bars there. One from the survey and one from the main page. With your code I have removed both. Can you help me removing the inner one only. I mean I need one on the blog but not on the survey.”

In that post the codes is working for hide all of scrollbar in the pages. If you only want to hide selected scrollbar on web pages, you can do that by insert the Css codes below :

/* To remove Body Scrollbar (Main Scrollbar in right side)

body::-webkit-scrollbar {display:none;}
body::-moz-scrollbar {display:none;}
body::-o-scrollbar {display:none;}
body::-google-ms-scrollbar {display:none;}
body::-khtml-scrollbar {display:none;}

Also, you can hide spesific scrollbar on the pages by mention Class/Id Selector. For example, you want to hide scrollbar of div tag by class “testing” :

/* To remove .testing Scrollbar

.testing::-webkit-scrollbar {display:none;}
.testing::-moz-scrollbar {display:none;}
.testing::-o-scrollbar {display:none;}
.testing::-google-ms-scrollbar {display:none;}
.testing::-khtml-scrollbar {display:none;}

Okay, That’s all guys. Hope you helped by this. Keep Spirit and Happy Blogging 🙂