Hide scrollbar on page

Hello community


I have apage where I have an container which is bigger than the screen and I can't make the container smaller. I have to scroll on the page to see the bottom of the container.

 
My problem is that I would like to hide the scrollbar still be able to scroll on the page. I found afew code snippet which allow me to hide the scrollbar but then I am not able to scroll.

The following code does not work within OutSystems:

body::-webkit-scrollbar {
  display: none;
}

Did anyone had this use case before?


Best regards

Dimitri

Solution

Have a look at this.

https://www.geeksforgeeks.org/hide-scroll-bar-but-while-still-being-able-to-scroll-using-css/

I don't know why but that style should work, maybe there Is something removing the scroll behaviour. Can you please share an OML? at the moment you can try the above solution that is almost like a display none, but it will just change the style of the scroll.

Hi ,

The problem may be @Dimitri Miller  have not used the !important after display:none; 

Regards,

Jitendra

Hey Jitendra

thank you for your answer!
Both codes (yours and mine) work. The point was that I have chosen the wrong element. The right element is the "screen-containter". And it doesn't have to be !important.

.screen-container::-webkit-scrollbar { 
    width: 0;
}
.screen-container::-webkit-scrollbar { 
    display: none;
}


Best regards
Dimtiri

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.