Created
January 14, 2015 18:49
-
-
Save korof/3b53e620f49d59a29c16 to your computer and use it in GitHub Desktop.
css: Fix jumping scrollbar
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html { | |
| margin-left: calc(100vw - 100%); | |
| margin-right: 0; | |
| } | |
| /*Note: calculating the scrollbar width this way only works when the <html> element has overflow: auto;. | |
| 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. This can be fixed by only enabling this feature on wider viewports: | |
| */ | |
| @media screen and (min-width: 960px) { | |
| html { | |
| margin-left: calc(100vw - 100%); | |
| margin-right: 0; | |
| } | |
| } | |
| /*http://aykevl.nl/2014/09/fix-jumping-scrollbar*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment