0
415
ViewsMake fixed page elements "honor" the body right padding?
My fixed button triggers a menu. While menu is opened, the body has overflow-y: hidden and a padding-right: 17px (actually this value is computed, omitted for brevity). The button (position: fixed) is shifted.
The HTML (the <p> is only needed to show the scrollbar):
<body>
<button class="btn">
Menu
</button>
<p style="height: 5000px;"></p>
</body>
To the CSS... note that .menu-opened is added when you click the button, via JavaScript:
body {
background-color: blue;
}
body.menu-opened {
padding-right: 17px;
overflow-y: hidden;
}
/* Useless styles */
.btn {
background-color: red;
position: fixed;
padding: 1rem;
top: 0;
right: 0;
margin-right: 2rem;
margin-top: 2rem;
}
As soon as the scrollbars are disabled, button is shifted because fixed elements doesn't honor the body padding (which is added to compensate the absence of the scrollbar). Any idea on how to solve this, without touching all fixed elements?
I think this is a common problem, so there should be an easy solution, but I can't get it.
·
Juan Pablo Isaza
1 answers
Answer question0
Take a look at scrollbar-gutter: MDN: scrollbar-gutter
·
Juan Pablo Isaza
Report
Answer question