Skip to main content

Forums

This topic contains 7 replies, has 6 voices, and was last updated by  bearhead 4 years, 4 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #200776

    bearhead
    Participant

    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?

    #200779

    Paulie_D
    Moderator

    Personally, I just add the scroll bar as a defualt if I think it’s going to be an issue,

    #200794

    moxieman
    Participant

    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/yNBGLq

    #200795

    Senff
    Participant

    This reply has been reported for inappropriate content.

    What is worse UX, a grey-ed out scrollbar, or a menu that “jumps” when the scrollbar appears on longer pages?

    I personally think the first one is worse.

    Are there any alternatives?

    Here’s one of them (with a link to another one): http://www.marksenff.com/front-end/even-more-elegant-fix-jumping-scrollbar-issue/

    #200796

    bearhead
    Participant

    This reply has been reported for inappropriate content.

    ok, cool, both of those seem like good solutions, I’ll try it out!

    #201229

    Alex
    Participant

    I don’t think you should be afraid of a scroll bar, but that’s just me.

    #202096

    josh
    Participant

    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?

    #202117

    bearhead
    Participant

    This reply has been reported for inappropriate content.

    I was able to implement senff’s solution, and I think that is the best option for my project.

    The height of the content on the page is constrained to 100vh (it’s just the menu and a full-screen image).

    On older browsers, the height is set to 100% view height via JS.

    If the user is on an older browser and has disabled JS, there is a fallback in which the height of the page content is arbitrarily set to 800px, meaning there will either be a scrollbar or white space depending on the user’s window size. It is not ideal, but the percent of traffic visiting the site under those conditions is virtually zero.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star