CSS-问题及技巧记录

/post/css-tricks article cover image

日常开发css问题、技巧及怪异问题解决记录。

scrollbar样式自定义

windows下原生滚动条十分丑陋，需要自定义样式设置scrollbar-width: xxx时会导致根元素尺寸动态增加，特定样式下会导致重绘闪烁。此时就需要使用scrollbar-gutter属性来设置滚动条宽度预留从而解决动态改变宽度影响特定布局。

css
html{
  scrollbar-gutter: stable;
}

::-webkit-scrollbar{
  width: 12px;
}

此时windows下正常，但是Macos下还是会动态改变视图尺寸。即使scrollbar-gutter: stable告诉浏览器要把滚动条的宽度计算到视图节点也是没有效果。此时需要手动指明容器元素overflow-x/overflow-y: scroll此时浏览器就会把滚动条宽度计算在内

css
html{
  /*overflow-y: auto;*/
  overflow-y: scroll;
}

参考资料：

to-be-continued