How can I remove the scroll bar, but still allow scrolling with mouse?

Question

In my site I am using slick carousel, which makes it really simple to create a div that is scrollable with mouse without a visible scrollbar. However, I have a different div, for which I can not use the slick plugin and I am trying to make it so it functions identically to the slick carousel.

Does anyone know if there is a class that slick uses to make a div scrollable with a mouse without a visible scrollbar, that I can add to another div?

For example, this is a div that uses a slick carousel that is scrollable with mouse without a scrollbar

<div class='col-sm-10 carousel1 d-flex align-items-center'>
        <div class='content'>
          <img src='assets/item1.png'>
        </div>
        <div class='content'>
          <img src='assets/item2.png'>
        </div>
        <div class='content'>
          <img src='assets/item3.png'>
        </div>
        <div class='content'>
          <img src='assets/item4.png'>
        </div>
        <div class='content'>
          <img src='assets/item5.png'>
        </div>
        <div class='content'>
          <img src='assets/item6.png'>
        </div>
        <div class='content'>
          <img src='assets/item7.png'>
        </div>  
      </div>

How can I use slick files to add the same functionality to another div, so it can be scrolled with a mouse without the scrollbar?

<div class='container'>
  <div class='box'>

  </div>
  <div class='box'>

  </div>
  <div class='box'>

  </div>
  <div class='box'>

  </div>
  <div class='box'>

  </div>
</div>

Another thing that hopefully someone more clever than me can explain: when I go to Chrome Dev tools and I choose the responsive mode with a phone or laptop with touch, it works and scrolls with mouse, however, if I switch back to laptop I have to use the scrollbar again.

Answer 1

Simplest answer is this (just change 'body' for whatever class you want):

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

And if you want to keep scroll bar visible, you can change the colors like this:

body::-webkit-scrollbar {
  width: 1em;
}

body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

Now, if you want to keep the scrollbar width as is, but make the scrollbars transparent (which is another trick), just replace the colors above with transparency:

body::-webkit-scrollbar {
  width: 1em;
}

body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
}

body::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0);
  outline: 1px solid rgba(0, 0, 0, 0);
}