02 Mar 2019

This article will take about 1 minute to read.
1 Comment

Let me start with a little disclaimer. Just because you can, doesn’t mean you should use it. Hiding scrollbars can be bad for accessibility and user experience.

But there are rare cases where it makes sense, usually when you have scrolling effects or when modal is opened. So use it wisely.

Check the demo. And find the cross browser code below:

html,
body {
  /* Firefox */
  scrollbar-width: none;
  /* IE 10+ */
  -ms-overflow-style: none;
}

/* WebKit - Safari, Chrome, Opera */
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

Don’t forget you can style scrollbars in webkit based browsers. Also you can use this code on any other element, not just body. Happy coding.

Category
JavaScript

Comments (1)

Petar Petrovic
04 Jun 2019, 08:44 AM

I keep needing to toggle scrollbar on the body element while developing so I made a bookmarklet based on the CSS above. Thanks Stanko! The code is below in case others need it as well. Cheers!

 javascript:(()=>{window.hss?window.hss.remove():(()=>{window.hss=document.createElement('style');hss.innerHTML='html,body{scrollbar-width:none;-ms-overflow-style:none;}body::-webkit-scrollbar{width:0;height:0;}';document.body.appendChild(hss);})()})() 

Leave a comment

Unfortunately, I have some problems with the comment system I'm using. If you can't submit a comment, please wait one minute and try again. I'm sorry for the inconvenience, I'm working on it.
Sending failed, please try again.
Thank you! Your comment is sent. Please note that all of the comments go through moderation.