CSS：纯CSS滚动动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17631417/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: pure CSS scroll animation
提问by blameless75
I have been looking for a way to scroll down when clicking on a button that is located on top of a page using CSS3 only.
我一直在寻找一种仅使用 CSS3 单击位于页面顶部的按钮时向下滚动的方法。
So I've found this tutorial: http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/
所以我找到了这个教程：http: //tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/
Demo: http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/
演示：http: //tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/
But it's a bit too advanced for my needs since I just want the browser to scroll down on a click on one button located on top of the page, so I was wondering: is it possible to do those CSS scrolls without the input buttons, just with an anchor tag?
但这对于我的需求来说有点太高级了，因为我只希望浏览器在单击页面顶部的一个按钮时向下滚动，所以我想知道：是否可以在没有输入按钮的情况下执行这些 CSS 滚动，只是带锚标签？
HTML looks like this: <a href="#" class="button">Learn more</a>
HTML 看起来像这样： <a href="#" class="button">Learn more</a>
I have already some CSS which I need to trigger on button click:
我已经有一些 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;
}
}
回答by Felix Edelmann
Use anchor links and the scroll-behaviorproperty (MDN reference) for the scrolling container:
为滚动容器使用锚链接和scroll-behavior属性（MDN 参考）：
scroll-behavior: smooth;
Browser support: Firefox 36+, Chrome 61+ (therefore also Edge 79+) and Opera 48+.
浏览器支持：Firefox 36+、Chrome 61+（因此也是 Edge 79+）和 Opera 48+。
Intenet Explorer, non-Chromium Edge and (so far) Safari do notsupport scroll-behaviorand simply "jump" to the link target.
Internet Explorer、非 Chromium Edge 和（到目前为止）Safari不支持scroll-behavior并且只是“跳转”到链接目标。
Example usage:
用法示例：
<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>
Here's a Fiddle.
这是一个Fiddle。
And here's also a Fiddlewith both horizontal and vertical scrolling.
这里还有一个具有水平和垂直滚动功能的Fiddle。
回答by Jesus Bejarano
You can do it with anchor tags using css3 :targetpseudo-selector, this selector is going to be triggered when the element with the same id as the hash of the current URL get an match. Example
您可以使用 css3:target伪选择器使用锚标记来完成，当与当前 URL 的哈希具有相同 id 的元素匹配时，将触发此选择器。例子
Knowing this, we can combine this technique with the use of proximity selectors like "+" and "~" to select any other element through the target element who id get match with the hash of the current url. An example of this would be something like what you are asking.
知道了这一点，我们可以将此技术与邻近选择器（如“+”和“~”的使用）相结合，通过目标元素选择与当前 url 的哈希匹配的任何其他元素。这方面的一个例子就像你问的那样。
回答by Acau? Montiel
You can use my script from CodePen by just wrapping all the content within a .levit-container DIV.
您可以通过将所有内容包装在 .levit-container DIV 中来使用我的 CodePen 脚本。
~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();
}();
回答by Ed Hasting-Evans
And for webkit enabled browsers I've had good results with:
对于支持 webkit 的浏览器，我在以下方面取得了不错的效果：
.myElement {
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth; // Added in from answer from Felix
overflow-x: scroll;
}
This makes scrolling behave much more like the standard browser behavior - at least it works well on the iPhone we were testing on!
这使得滚动的行为更像标准的浏览器行为——至少它在我们测试的 iPhone 上运行良好！
Hope that helps,
希望有所帮助，
Ed
埃德
