Menu
I'm designing a website and I have multiple pages that use the same template, some pages are longer than the browser window's height, other's aren't. The ones that are longer get pushed to he left by about 10px, this might no sound like much but it's noticeable when switching pages as everything jumps sideways.
Is there some CSS thing I can do to make the scroll bar on each page appear over the content rather than pushing it, I have a margin in the template so if the browser window is too small it will just cover the margin when the user scrolls to the far right.
691
To prevent scrolling with this property, just apply the rule overflow: hidden to the body (for the entire page) or a container element. This hides all content beyond the element's border.
The easy fix is to use width: 100% instead. Percentages don't include the width of the scrollbar, so will automatically fit. If you can't do that, or you're setting the width on another element, add overflow-x: hidden or overflow: hidden to the surrounding element to prevent the scrollbar.
Press Win + I keys together to go to Settings. Select Ease of Access and on the page that opens, scroll down to Simplify and personalize Windows section. Alternatively, type scrollbar in the search bar, and under Best match click/tap on Automatically hide scrollbars in Windows.
Select " Display " on left and scroll down to " automatically hide scroll bars in Windows " . Now Enable it.
The only way to do this is to have the scrollbar always visible.
html { overflow-y: scroll; }
Give overflow value as overlay. This will avoid the recalculation of layout when scrollbar appears
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
