1

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.

Vikintas Raudavicius
  • 92
  • 1
  • 5
  • As of now you can only modify scrollbar in chrome, `slick.js` is probably doing everything using javascript – Rainbow Apr 07 '20 at 20:09
  • Does this answer your question? [Hide scroll bar, but while still being able to scroll](https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll) – Ronak Shah Apr 08 '20 at 01:59

1 Answers1

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);
}
BeePollen
  • 30
  • 7