0

Lets say I have a div with a height of 10 000px. Since the div's height is bigger than the viewport of the user, the browser will show the scrollbar. I am wondering if I can hide the scrollbar but still be able to scroll through the div.

I tried using overflow-y: hidden; and height: 100vh; on the parent div, however, this doesn't allow me to scroll.

As you can see, in the snippet below the scrollbar is hidden but I can't scroll in order to see the third image.

.parent {
    background-color: red;
    overflow-y: hidden;
    height: 100vh;
}
<div class='parent'>
    <img src='https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'>
    <img src='https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'>
    <img src='https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'>
</div>
Onyx
  • 5,186
  • 8
  • 39
  • 86
  • 2
    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) – Ahmet Zeybek Feb 01 '20 at 09:16
  • ```overflow:hidden``` basically hides content that overflows. Use ```overflow:auto```, so that the scrollbar will only be shown if your viewport is smaller than your div height. – Valentin Soveaux Feb 01 '20 at 09:27

1 Answers1

2

you can try this 

.parent::-webkit-scrollbar {
    width: 0px;
}
Nourhan Ahmed
  • 179
  • 1
  • 10