moxystudio
Investigate a better way to resolve jumping scrollbar
From @satazor on July 12, 2017 16:12
Possible solution: https://aykevl.nl/2014/09/fix-jumping-scrollbar
Copied from original issue: moxystudio/react-with-moxy#45
Possible solution: https://aykevl.nl/2014/09/fix-jumping-scrollbar
While I've found that this is the de-facto solution to this problem according to the internet, it doesn't seem to be a universal fix.
It behaves correctly for elements which don't take up the full width of the viewport, while displaying a nasty gap between the left end of the element and the left edge of the viewport, as can be seen in this pen
A potential solution for the aforementioned issue would be to place the rule in specific elements, as can be seen in this other pen. However, this makes the "fix" conditional and it becomes harder to apply.
However, if my interpretation of the last paragraphs is accurate, the article addresses this issue:
There's one small issue: when using responsive web design (which you should!), it gets quite obvious that the margin at the left is bigger than at the right when the page is made smaller. This won't be an issue on mobile because scrollbars aren't normally shown there, but it just looks ugly on a desktop browser when the browser is resized.
And the solution proposed by the author is to use a media query which makes it so that the rule is only applied if the viewport is wide enough that the gap I mention above is not as noticeable. In my opinion, the gap is still very much noticeable, no matter the width.
In conclusion, is this a valid fix within the context of this project? Please let me know your opinion.
Here's a video demonstrating the problem for reference: https://drive.google.com/open?id=110ThoMGiqvY35yGzJ3FXNSVWf_KpnDb1