Log in to AnswerLog in to Follow
2021-09-08 12-52-36
Dimitri Miller
22Views
3Comments
Solved
Hide scrollbar on page
Question
UI
CSS
OutSystems UI

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

0
0
26 Apr
2021-06-02 20-50-04
Márcio Carvalho
Champion
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.

1
0
26 Apr

Hi ,

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

Regards,

Jitendra

0
0
27 Apr

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

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