How to make website scrollable without seeing scrollbar?

Question

I want to remove the scrollbar of the browser and still be able to scroll.

I have tried:
overflow: hidden; in the parent div
overflow-y: auto; in child div

I expected it to hide scrollbars and scroll as normal, but it removed the browser scroll bars and added one by itself, which wouldn't let me move.

 body { background-image: url("image"); background-attachment: scroll; overflow: hidden; } /*other css is inline at the top 2 divs*/

 <div style="overflow: hidden"> <div style="overflow-y: scroll; padding-right: 10px"> <p style="font-weight: 800; font-size: 60px; font-family:sans-serif; text-align: center; color: #ff4e00; margin-bottom: 15px; border-bottom: 3px solid #ff4e00;">Burgers</p> <a href="#" style="padding-left: 30px"> <div style="position:absolute; border: solid black auto; background: white; border-radius: 10px; margin-left: 30px;" class="menuTemplate"> <div> <img src="https://www.seriouseats.com/recipes/images/2015/07/20150702-sous-vide-hamburger-anova-primary-1500x1125.jpg" height="250px" width="335" style="padding: 10px"::after> </div> <div class="menuTextBox">VEG TREAT BURGER</div> <div class="menuInfo"> <div><span class="menuInfo-inner">Price:</span></div> <div><span class="menuInfo-inner">45₹</span></div> </div> </div> </a> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <p style="font-weight: 800; font-size: 60px; font-family:sans-serif; text-align: center; color: #ff4e00; margin-bottom: 15px; border-bottom: 3px solid #ff4e00;">Burgers</p> <a href="#" style="padding-left: 30px"> <div style="position:absolute; border: solid black auto; background: white; border-radius: 10px; margin-left: 30px; margin-bottom: 30px;" class="menuTemplate"> <div> <img src="https://www.seriouseats.com/recipes/images/2015/07/20150702-sous-vide-hamburger-anova-primary-1500x1125.jpg" height="250px" width="335" style="padding: 10px"::after> </div> <div class="menuTextBox">VEG TREAT BURGER</div> <div class="menuInfo"> <div><span class="menuInfo-inner">Price:</span></div> <div><span class="menuInfo-inners">45₹</span></div> </div> </div> </a> </div> </div>

 body { background-image: url("https://image.freepik.com/free-photo/close-up-burger-with-black-background_23-2148234990.jpg"); background-size: cover; background-repeat: no-repeat; background-attachment: scroll; background-color: black; overflow: hidden; } /*other overflows are inline at the top

 <div style="overflow: hidden"> <div style="overflow-y: scroll; padding-right: 10px"> <p style="font-weight: 800; font-size: 60px; font-family:sans-serif; text-align: center; color: #ff4e00; margin-bottom: 15px; border-bottom: 3px solid #ff4e00;">Burgers</p> <a href="#" style="padding-left: 30px"> <div style="position:absolute; border: solid black auto; background: white; border-radius: 10px; margin-left: 30px;" class="menuTemplate"> <div> <img src="https://www.seriouseats.com/recipes/images/2015/07/20150702-sous-vide-hamburger-anova-primary-1500x1125.jpg" height="250px" width="335" style="padding: 10px"::after> </div> <div class="menuTextBox">VEG TREAT BURGER</div> <div class="menuInfo"> <div><span class="menuInfo-inner">Price:</span></div> <div><span class="menuInfo-inner">45₹</span></div> </div> </div> </a> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <p style="font-weight: 800; font-size: 60px; font-family:sans-serif; text-align: center; color: #ff4e00; margin-bottom: 15px; border-bottom: 3px solid #ff4e00;">Burgers</p> <a href="#" style="padding-left: 30px"> <div style="position:absolute; border: solid black auto; background: white; border-radius: 10px; margin-left: 30px; margin-bottom: 30px;" class="menuTemplate"> <div> <img src="https://www.seriouseats.com/recipes/images/2015/07/20150702-sous-vide-hamburger-anova-primary-1500x1125.jpg" height="250px" width="335" style="padding: 10px"::after> </div> <div class="menuTextBox">VEG TREAT BURGER</div> <div class="menuInfo"> <div><span class="menuInfo-inner">Price:</span></div> <div><span class="menuInfo-inners">45₹</span></div> </div> </div> </a> </div> </div>

Answer 1

To hide the scrollbar use -webkit- because it is supported by major browsers (Google Chrome, Safari or newer versions of Opera). There are many other options for the other browsers which are listed below:

--webkit- (Chrome, Safari, newer versions of Opera): .element::-webkit-scrollbar { width: 0 !important } --moz- (Firefox): .element { overflow: -moz-scrollbars-none; } .element { overflow: -moz-scrollbars-none; } --ms- (Internet Explorer +10): .element { -ms-overflow-style: none; } .element { -ms-overflow-style: none; }

Answer 2

Wrap all your page content into a wrapper element ( div in my case here ) and add the CSS below to your app.

I have here a working example: https://2xtlr.csb.app/

CSS:

body,
html {
  overflow: hidden;
  margin: 0;
  height: 100%;
}
.page {
   max-height: 100%;
   overflow: auto;
   margin: 0 -15px 0 0;
}

HTML:

<html>
  ...
  <body>
     <div class="page">
         ... <!-- YOUR PAGE CONTENT GOES HERE -->
     </div>
  </body>
</html>