关于页面滚动的两个 CSS 属性

在上个月开发主题的时候用到了很多以前没见过的 CSS ，这里随便水个文记一下。

scroll-behavior

原先这个主题在文章下方的作者是有一个分享文章到 facebook 和 twitter 的。在转移主题到 Hexo 的时候也就顺便复刻了下来。 现在主题自己用了就随便改，中国用 facebook 和 twitter 的肯定少，而且也不会有人分享，就直接删了。 删了后很空，那得加个东西，想了一下刚好少个返回顶部的按钮，而且这个分享部件刚好在文章底部，很合适。

一般返回顶部都是直接用 JS 实现的，但是我不懂 JS ，写个 console.log 我都不会就不用说写返回顶部了。那就直接用回最原始的方法：锚点定位。 锚点定位其实很好用，但主要是太生硬了，点一下定位就瞬间冲过去了，没有任何过渡。很多人用JS来做返回顶部而不用 CSS 可能就是锚点定位的这个缺点。

但实际上CSS的 scroll-behavior 可以解决这个问题。只需要在滚动的部分加上这么一段：

html,body{
	scroll-behavior:smooth;
}

具体效果你已经可以点击右边的文章目录或者底部的按钮来试试了。 建议可以滚动的地方都加上 scroll-behavior，不用白不用。 貌似目前主流浏览器都支持了，当然IE不是主流。

scrollbar-gutter

浏览器的滚动条是有宽度的，而且会占用页面的空间导致页面抖动。 原本我是参考了泽泽的 网页滚动条占用网页宽度导致网页抖动问题 来解决的，现在发现了一个新的 CSS 可以用。

:root{
	scrollbar-gutter:stable;
}

这个 CSS 是固定留一个空间让滚动条使用，这样有没有滚动条页面都是一个宽度，也就不会造成页面抖动。听起来还不错，但是兼容性很差，总之还是用泽泽的方法吧。 再顺便说一下语法：

scrollbar-gutter:auto; /*默认*/
scrollbar-gutter:stable; /*预留空间给滚动条*/
scrollbar-gutter:stable both-edges; /*两侧都预留空间给滚动条 可能比较对称*/