How to hide the scrollbar using JavaScript

Question

How can the scrollbar be hidden? I want to do this because the scrollbar is not nice.

overflow:hidden is not useful, because my div element has many other elements.

So setting overflow does not solve my problem.

Answer 1

You can hide the scrollbar with this...

document.body.style.overflow = 'hidden';

...and unhide it with this:

document.body.style.overflow = 'visible';

However, you have to question yourself whether this is really what you want. Scrollbars appear for people to be able to view things that are outside of their small screens.

Answer 2

You have to overwrite the CSS settings as follows:

<style type="text/css">
    #YourSpecialDiv { overflow: hidden !important; }
</style>

And the div you should add the id tag i.e.

<div id="YourSpecialDiv"...>...</div>

Answer 3

I don't think there is actually a way to just hide scrollbars properly. What overflow:hidden, overflow-x:hidden and overflow-y:hidden do is actually 'if it goes outta 100vw/100vh/100vw an 100vh then do not display it'. Overflow is only do not display what's outside of the current(initial tbh) view.

It hides scrollbar because everything that is in the HTML that should be outside will not be on the page when viewing it (nothing needing scroll so no scrollbar).

The only hide available is (here to hide the Y-axis scrollbar) :

[container]{
    overflow:scroll;
    overflow-x:hidden;
}

[container]::-webkit-scrollbar{
    width:0;
    background-color:transparent;
}

Which is a real hide of scrollbar, and sadly works only on webkit-based browsers.

If one day all vendors accept this then it will be amazing and we'll finally be able to hide scrollbars.

Answer 4

You can use the following on any element:

::-webkit-scrollbar {
    width: 0px;
}

Source

This only works on webkit browsers, so no IE and Firefox.

Answer 5

The best way to do this would be some sort of pseudo element css selector. But I think only webkit (Chrome/Safari) has one for the scrollbar, so it isn't very cross browser.

A hacky alternative is to wrap it in a div that hides away the scrollbar, by setting the width smaller than the contained div by the scrollbar's size

DEMO (may take a while to get the css perfect, but you get the gist)

The problem here is that scrollbar sizes differ per-browser, so you'll have to make the outer div the largest of the scrollbars' width's smaller. And to not cut off any content in the browsers with the smaller scrollbars, it'd be best to add padding of the biggest size difference for scrollbars.

Answer 6

You have to use the CSS property overflow, which 'manages' what should happen when the content of a certain element exceeds its boundaries. Setting it to hidden hides the scrollbars.

overflow: hidden;

or

someElement.style.overflow = 'hidden';

Answer 7

var container = document.querySelectorAll("div.container")[0];
container.addEventListener("wheel", function(event) {
  /*Mouse wheel scrolled down*/
  if (event.deltaY > 0)
    container.scrollTop += 30;

  /*Mouse wheel scrolled up*/
  else
    container.scrollTop -= 30;
}, false);

div.container {
  height: 15rem;
  width: 20rem;
  overflow: hidden;
  padding: 1rem;
  border: 1px solid;
  font-family: "Seoge UI", "Calibri", sans-serif;
  font-size: 1.25rem;
  line-height: 1.5rem;
}

<div class="container">
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus odio, scelerisque vel sollicitudin sed, ullamcorper sed dolor. Vivamus sed egestas nisl. Ut sollicitudin finibus tortor sit amet posuere. Cras erat massa, auctor non urna quis, interdum sollicitudin sapien. Pellentesque gravida ullamcorper est. Maecenas accumsan lobortis mauris, et auctor urna mattis et. Fusce venenatis, magna blandit faucibus sodales, tortor nunc lacinia ligula, bibendum euismod leo felis placerat velit. Fusce sed arcu vitae metus ultricies tincidunt auctor a diam. Duis at augue efficitur eros rutrum iaculis. Praesent eu maximus orci. Praesent lobortis semper elit vitae convallis. Donec consequat lectus tortor, vel aliquam diam fringilla ut. Sed ac tempus justo. Ut bibendum euismod magna, id egestas lacus pulvinar ut. Sed sit amet felis ornare, gravida leo ac, semper dui.</span>  Pellentesque efficitur eget nisl tincidunt gravida. Aenean sed nisl commodo, porta lectus in, tincidunt dui. Vivamus eget nunc ipsum. Praesent sed quam odio. Proin aliquam dapibus dictum. Maecenas tristique lorem id erat venenatis, a varius nibh accumsan.
  Nulla tempor sagittis odio, nec ultricies sem posuere ornare. Vestibulum sit amet consequat neque. Cras iaculis eleifend nisi. Sed erat mauris, fringilla nec congue quis, lobortis in justo. Quisque sit amet metus id ligula mattis elementum. Morbi sodales,
  dui eget fringilla pretium, sem tellus posuere dolor, id pharetra neque elit ac nisl.<br /> Quisque <br />nibh<br />enim,<br />mattis<br />a<br />aliquam<br />eget,<br />luctus<br />id<br />velit.<br />Pellentesque<br />sodales<br />eros<br />eget<br
  />diam<br />gravida<br />porta.<br />Maecenas<br />leo<br />tortor,<br />malesuada<br />quis<br />euismod<br />sed,<br />dictum<br />ut<br />nulla.<br />Vestibulum<br />in<br />massa<br />a<br />quam<br />vehicula<br />placerat<br />in<br />quis<br
  />libero.<br />Maecenas<br />convallis<br />bibendum<br />faucibus.<br />In<br />porttitor<br />quis<br />justo<br />non<br />tincidunt.<br />Pellentesque<br />at<br />justo<br />tincidunt,<br />auctor<br />tortor<br />at,<br />tempus<br />eros. <br
  />Generated: 5 paragraphs, 414 words and 2814 bytes of Lorem Ipsum
</div>

Answer 8

My eyes hurt when I read your question. However, it is impossible to hide the browser scrollbar without setting "overflow:hidden"(?!). It is a default browser behavior.

Since your div has many other elements why don't you set the proper width and height to it? Otherwise please make it scrollable so that the users can fully read your content.