统一浏览器的滚动槽title

2025-01-31date
css层面上处理不同浏览器的滚动槽
description

之前在chromium上画面不overflow时滚动条随之消失,导致切换界面的时候整个页面会往左挤压一下再回来,造成一个 shake 的效果, 而且只在webkit浏览器上出现(因为火狐的scrollbar是悬停于页面上方而不占用实际空间的),而且我的页面有些动画效果依赖计算元素的x轴坐标,所以也不好用 scrollbar-gutter

所以现在有一条比较hack的方案,在webkit的浏览器上始终显示bar,火狐上则不管。

@media screen and (-webkit-min-device-pixel-ratio:0) {
  html {
    overflow-y: scroll;
  }
}

另外有个坑,solid-start 的「最外层」scrollbar 是由body决定的,然而body被抽象起来了在源码里看不到。要应用所谓全局bar样式的话需要:

body {
	@apply scrollbar scrollbar-rounded
}
©2018-2025 Secirian | CC BY-SA 4.0