Menu
i am using div#wrapper margin: 0 auto to center the div, there is scroll bar on this page however when it transition to second page where there is no scroll bar, it appears as jumpy because there is no scroll bar i guess.
<body>
<div id="wrap">
<div id="wrapper">
....
#wrapper { width: 970px; margin: 0 auto; }
what would be the best solution for this not to make it jumpy?
566
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.
Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.
Set html width to be equal viewport and turn off horizontal scroll to avoid appearing of horizontal scrollbar when vertical one will expand html.
html {
width: 100vw;
overflow-x: hidden;
}
I've run into this a few times, the best thing I've found is to force a Y scroll-bar on every page, even if it isn't needed using in your style sheet:
html { overflow-y: scroll; }
This will mean there is always a right scroll bar on the page, but it will be enabled/disabled as needed, and prevent the jump.
42
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