纯 CSS 滚动动画
Posted
技术标签:
【中文标题】纯 CSS 滚动动画【英文标题】：Pure CSS scroll animation 【发布时间】：2013-07-11 23:17:15 【问题描述】：我一直在寻找一种在单击仅使用 CSS3 的页面顶部的按钮时向下滚动的方法。
所以我找到了这个教程：http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/
演示：http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/
但这对于我的需求来说有点太高级了，因为我只想让浏览器在点击页面顶部的一个按钮时向下滚动，所以我想知道：是否可以在没有输入的情况下进行这些 CSS 滚动按钮，只有一个锚标签？
html 看起来像这样：<a href="#" class="button">Learn more</a>
我已经有一些 CSS 需要在按钮点击时触发：
/* Button animation tryout. */
.animate
animation: moveDown 0.6s ease-in-out 0.2s backwards;
@keyframes moveDown
0%
transform: translateY(-40px);
opacity: 0;
100%
transform: translateY(0px);
opacity: 1;
【问题讨论】：
这种基于 CSS 的滚动的主要缺点是用户在使用基于 CSS 的滚动向下滚动到选定元素后无法手动滚动up。考虑到动画页面转换，用户似乎会直觉地想要这样做！对我来说，这又回到了 jQuery 的 animate(scrollTop:...)。还是我错过了什么？ 使用this solution，您可以修复无法返回的问题。只需使用此 HTML 标记：<div parallax="moveDown">...</div> 它会在您向下滚动时向下移动，并在您向上滚动时向后移动...
【参考方案1】：
为滚动容器使用锚链接和scroll-behavior 属性 (MDN reference)：
scroll-behavior: smooth;
Browser support：Firefox 36+、Chrome 61+（因此还有 Edge 79+）和 Opera 48+。
Intenet Explorer、非 Chromium Edge 和（到目前为止）Safari不支持scroll-behavior，只是“跳转”到链接目标。
示例用法：
<head>
<style type="text/css">
html
scroll-behavior: smooth;
</style>
</head>
<body id="body">
<a href="#foo">Go to foo!</a>
<!-- Some content -->
<div id="foo">That's foo.</div>
<a href="#body">Back to top</a>
</body>
这是Fiddle。
这里还有一个Fiddle，可以水平和垂直滚动。
【讨论】：
为什么要投反对票？您能否解释一下我如何改进我的答案或为什么我的解决方案不好？ 其实我从来没有想过水平滚动。但正如你在这个小提琴中看到的那样：jsfiddle.net/1Lfybv56/2 它也可以工作——水平和垂直滚动也一样。我发现的唯一区别：水平滚动时，指向 name="..." 标签的锚链接不起作用，您必须使用 id="..."。 你被否决了，因为caniuse.com/#search=scroll-behavior 它说它只适用于 Firefox。因此，对于生产级站点来说，它基本上毫无价值，因为它只能在一个甚至不是最常用的浏览器中运行。除非，您网站上的流量主要是 Firefox。 Jesus 的解决方案非常好，但我要添加到 Felix 的答案中，因为它适用于 Chrome v62、Firefox v57 并且正在考虑在 Edge 中（Safari 尚不支持），我们想把浏览器制造商的压力。所以这就是我给我的学生作为这些浏览器的一个简单示例，还有平滑滚动的“顶部”链接：daveeveritt.github.io/css-smooth-scroll 回购在这里，自述文件中有更多信息和链接：github.com/DaveEveritt/css-smooth-scroll 它适用于除了极其古老的 Chrome 和 Firefox 以及三星浏览器之外的所有版本。在我撰写此评论时，在我所有的网站上，这些浏览器的不受支持的版本在市场份额中所占的份额可以忽略不计。这里的问题主要是缺乏对 Safari 的支持，在某种程度上，IE 和 Edge。但是......鉴于它的优雅程度以及这是一个非必要的功能，这个答案可能会吸引很多人（因为这个原因它对我很有吸引力。）【参考方案2】：您可以使用 css3 :target 伪选择器使用锚标记来完成此操作，当与当前 URL 的哈希具有相同 id 的元素获得匹配时，将触发此选择器。 Example
知道了这一点，我们可以将此技术与“+”和“~”等邻近选择器的使用结合起来，通过与当前 url 的哈希匹配的目标元素来选择任何其他元素。例如you are asking。
【讨论】：
您可以使用目标技术来定位布局中的任何元素，甚至是选择“”标签的页面本身：）。 说，为什么我们在后面的演示中需要backface-visibility？我们没有翻转任何东西......
对于其他希望看到此动画所需的最低要求的人，我删除了格式等，以便更容易弄清楚jsfiddle.net/YYPKM/347
我认为这里不可能灵活，对吧？转换需要一个真实的值，不能定位到另一个元素，对吧？
@LouisMaddox 在小提琴的 css 中添加 header position: fixed; left: 0; top: 0; z-index: 10; 将确保链接始终可点击，因为现在，点击数字 2 将使数字 1 无法点击。【参考方案3】：
您可以使用我的 CodePen 脚本，只需将所有内容包装在 .levit-container DIV 中。
~function ()
function Smooth ()
this.$container = document.querySelector('.levit-container');
this.$placeholder = document.createElement('div');
Smooth.prototype.init = function ()
var instance = this;
setContainer.call(instance);
setPlaceholder.call(instance);
bindEvents.call(instance);
function bindEvents ()
window.addEventListener('scroll', handleScroll.bind(this), false);
function setContainer ()
var style = this.$container.style;
style.position = 'fixed';
style.width = '100%';
style.top = '0';
style.left = '0';
style.transition = '0.5s ease-out';
function setPlaceholder ()
var instance = this,
$container = instance.$container,
$placeholder = instance.$placeholder;
$placeholder.setAttribute('class', 'levit-placeholder');
$placeholder.style.height = $container.offsetHeight + 'px';
document.body.insertBefore($placeholder, $container);
function handleScroll ()
this.$container.style.transform = 'translateZ(0) translateY(' + (window.scrollY * (- 1)) + 'px)';
var smooth = new Smooth();
smooth.init();
();
https://codepen.io/acauamontiel/pen/zxxebb?editors=0010
【讨论】：
-1;该问题要求提供纯 CSS 解决方案，但您的答案完全是 javascript。【参考方案4】：对于支持 webkit 的浏览器，我在以下方面取得了不错的效果：
.myElement
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth; // Added in from answer from Felix
overflow-x: scroll;
这使得滚动行为更像标准浏览器行为 - 至少它在我们测试的 iPhone 上运行良好！
希望对你有帮助，
埃德
【讨论】：
我阅读了 MDN specification 的 -webkit-overflow-scrolling 属性，我认为它只是在您执行滚动手势时改变了行为。提问者考虑了自动滚动（因此您只需点击一个按钮/链接，而不必向下滑动或移动滚动条）;-)。顺便说一句，overflow-x: auto 在大多数情况下更好，因为它仅在确实有要滚动的内容时才显示滚动条（scroll 总是会显示滚动条）。以上是关于纯 CSS 滚动动画的主要内容，如果未能解决你的问题，请参考以下文章