css - 纯 CSS 滚动动画

Question

我一直在寻找一种在单击仅使用 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;
    }
}

score 123 · Accepted Answer

为滚动容器使用锚链接和scroll-behavior属性（MDN 参考）：

scroll-behavior: smooth;

浏览器支持：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>

这是一个小提琴。

这也是一个水平和垂直滚动的小提琴。

score 92 · Accepted Answer

您可以使用 css3:target伪选择器使用锚标记来执行此操作，当与当前 URL 的哈希具有相同 id 的元素获得匹配时，将触发此选择器。例子

知道了这一点，我们可以将此技术与“+”和“~”等邻近选择器的使用结合起来，通过目标元素选择任何其他元素，这些元素的 id 与当前 url 的哈希值匹配。这方面的一个例子就是你所问的。

score -2 · Accepted Answer

您可以通过将所有内容包装在 .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();
}();

https://codepen.io/acuaamontiel/pen/zxxebb?editors=0010

score -3 · Accepted Answer

对于启用 webkit 的浏览器，我在以下方面取得了不错的成绩：

.myElement {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth; // Added in from answer from Felix
    overflow-x: scroll;
}

这使得滚动行为更像标准浏览器行为——至少它在我们测试的 iPhone 上运行良好！

希望有帮助，

埃德

css - 纯 CSS 滚动动画

4 回答 4

Related

Reference