文章标签

滚动链接动画

您向下滚动到某个位置，现在您想以某种方式设置样式。标题变为固定。动画触发。出现目录。要根据滚动位置执行任何操作，需要使用 JavaScript …

Chris Coyier 于 2019 年 3 月 29 日

假设您想以编程方式从上到下滚动网页。例如，您正在录制屏幕录制并且想要一个漂亮的全页面滚动。您可能无法自己滚动它，因为它会变得不均匀和抖动。…

Chris Coyier 于 2019 年 3 月 12 日

平滑滚动变得容易多了。如果您希望在页面上始终使用它，并且乐于让浏览器为您处理持续时间，则只需一行 CSS

html {
  scroll-behavior: smooth;

…

Chris Coyier 于 2019 年 3 月 11 日

Rik Schennink 文档介绍了一种系统，允许编写 CSS 选择器，在页面滚动到特定位置时设置样式。如果您像我一样，您已经在寻找 document.addEventListener('scroll' ... 并且对...感到恐惧。

Chris Coyier 于 2020 年 1 月 30 日

任何overflow 值，除了 visible 和没有高度，都是具有 position: sticky; 的子元素的敌人。就像该元素准备好粘贴，当父元素滚动时，但它永远不会这样做，因为高度不受约束。…

Chris Coyier 于 2019 年 2 月 25 日

CSS 滚动捕捉允许您在用户完成滚动后将视窗锁定到某些元素或位置。它非常适合构建如下交互：…

Max Kohler 于 2020 年 6 月 18 日

您知道 position: relative 如何为元素内部的绝对定位创建一个新上下文？嗯，position: sticky 是 position: fixed 的本地范围版本。让我们以具有粘性关闭按钮的模态框为例，看看它是如何工作的。

Chris Coyier 于 2018 年 3 月 26 日

CSS 中的 scroll-behavior 属性允许我们定义当用户单击指向滚动内锚定位置的链接时，浏览器的滚动位置是跳到新位置还是平滑地动画化过渡。…

Geoff Graham 于 2020 年 1 月 30 日

平滑滚动（从源链接到目标锚点的视窗内位置的动画变化）可以是添加到网站的一个不错的交互细节，为体验增添精致感。如果您不相信我，…

Heather Migliorisi 于 2017 年 4 月 14 日