Web page shifts left or right when clicking navigation buttons - twitch project

Web page shifts left or right when clicking navigation buttons - twitch project
0

#1

I have a problem with my entire web page shifting left 10px when I click a navigation button. It is annoying. I am not sure how to fix it. I am using Chrome Version 61.0.3163.100 (Official Build) (64-bit) on Windows 10. I disabled all chrome extensions and it still happens. The web page also jumps left and right about 10px in Microsoft Edge web browser.

Here is my twitch streamers app. When I click the “Offline” button the page shifts left 10px. If I then click “All” next, it does not shift. However, when I click on the “Online” button again the page then shifts right 10px.


#2

It is because a scrollbar is needed (for most screen sizes) for the longer list of offline channels. Not sure if you can do much about it. You can add overflow: scroll to <html>, but that will also show a scrollbar when it is not needed.

EDIT: This might be better:
https://aykevl.nl/2014/09/fix-jumping-scrollbar


#3

What is happening is when the content extends past the bottom of the screen, the browser adds a vertical scrollbar on the right-hand side, so that is the shift to the left you experience. When the content is “shorter”, the scrollbar disappears and there is a shift back to the right.

One solution is to change your html css to:

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
    overflow-y: scroll; <!-- this will force a vertical scroll bar even when not needed -->
}

#4

Aha! Mystery solved. :smiley: Thanks for the information @BenGitter @RandellDawson