Scrollbar rattling problem and solution in Windows

If you set overflow: hidden on the Body element, the scrollbar may appear and disappear on Windows, causing it to wobble. This is because the visible area of the scrollbar affects the layout of the page.

One way around this problem is to use the code below. However, Firefox does not support this method.

html { 
 &.win { 
 &::-webkit-scrollbar { 
 width: 15px; 
 } 
 &::-webkit-scrollbar-thumb { 
 background-color: colors(blue); 
 } 
 &::-webkit- scrollbar-track { 
 background: transparent; 
 } 
 } 
} 

body { 
 overflow: overlay; 
} 

You can also use css_browser_selector.js to apply this style to Windows only.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top