130
Views
3
Comments
How to set the scroll bar to be not visible until the content is less on the screen?
Application Type
Reactive

I need to set the scroll bar to be not visible in the screen until the content fixes on the shrinked screen on shrinking the screen.

2023-04-06 11-24-23
Paulo Zacarias

Hi Aman, 

Without any other context of the issue you are facing, the CSS properties that you might be looking for are: overflow-y and overflow-x.

If you are using OutSystems templates, I believe that at least the overflow-y is set to auto, as the vertical scrollbar should adapt to the content of the screen and only be visible when needed. 

Please give us more context about the issue, if you don't manage to sort this out.

Regards, 

PZ

2022-07-03 17-24-08
Sourabh sharma

Hi @Aman Kumar Bhardwaj 

Hiding the scrollbar might aid your design in some cases. But in others, removing this part of the page can actually harm the user experience.

Most visitors associate the activity of scrolling with a visible scrollbar. So, if you apply this method to an entire page, it might seem strange to some. Also, scrollbars tell us how much of the page we have left to view (unless infinite scroll is implemented). Unless you have some other visual indicator that there is more content left to see, a lack of scrollbar could be off-putting.

However you want to apply so you can play with  overflow 

overflow: auto : The auto value is similar to scroll, but it adds scrollbars only when necessary:

div {
  overflow: auto;

---------

div {
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: scroll; /* Add vertical scrollbar */

reamMore 

Hope this will help you !! 


2025-12-17 21-10-06
Shlok Agrawal

Weather to show scroll bar or not is a css property set for a particular container generally. If you want to apply it for a particular container just required items inside a container and and set CSS property as shown below:If you want to apply for whole screen use css style sheet editor (As shown in the image below "CSS") and apply same CSS to the whole screen, this will be the first tab inside the style sheet editor and tabheading will be the name of the respective screen.

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