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

2023-05-29 13:52:23 浏览数 (2)

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

scroll-behavior

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

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

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

代码语言:javascript复制
html,body{
	scroll-behavior:smooth;
}

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

scrollbar-gutter

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

代码语言:javascript复制
:root{
	scrollbar-gutter:stable;
}

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

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

0 人点赞