April 20, 2015 at 7:23 am #200776
On the website I’m developing, the home page is 100% view height, however, all other pages of the site are longer and require the user to scroll, each page has a menu that is consistent site-wide.
What is worse UX, a grey-ed out scrollbar, or a menu that “jumps” when the scrollbar appears on longer pages?
Are there any alternatives? The home page content does not lend itself to a longer-than-viewport design, nor is that something the client would even approve.
Is it possible to detect the width of the scroll-bar, and apply that as padding or margin to the menu, so it doesn’t appear to jump, when navigating to other pages?April 20, 2015 at 7:46 am #200779
Personally, I just add the scroll bar as a defualt if I think it’s going to be an issue,April 20, 2015 at 8:58 am #200794
You can actually detect the width of the scrollbar by using
calc(100vw - 100%)
Using this width, you can set padding on the element to bump the content to the right when the scrollbars appear.
This will technically result in off-center content, but the jump will be gone.
Check out this pen. http://codepen.io/jeffSWMC/pen/yNBGLqApril 28, 2015 at 4:08 am #201229
I don’t think you should be afraid of a scroll bar, but that’s just me.May 12, 2015 at 9:57 pm #202096
Neither are significant UX issues. I wouldn’t worry too much about it, but my recommendation would be to show the scrollbar.
On another note, how do you know that the content does not lend itself to a longer-than-viewport design? What height range are you accounting for?
You must be logged in to reply to this topic.