关于页面滚动的两个 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; /*两侧都预留空间给滚动条 可能比较对称*/