CSS：纯CSS滚动动画

76

我一直在寻找一种仅使用CSS3单击位于页面顶部的按钮时向下滚动的方法。

所以我找到了本教程：http : //tympanus.net/codrops/2012/06/12/css-only-response-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;
    }
}

— 无罪75
source

7

这基于CSS的滚动的一个主要缺点是，用户不能手动滚动起来使用基于CSS的滚动已经向下滚动到所选择的元素之后。鉴于动画页面的过渡，用户似乎很想直观地做到这一点！对我来说，它又回到了jQuery的animate（{scrollTop：...}）。还是我错过了什么？

— vicmortelmans 2014年

1

使用此解决方案，您可以解决无法返回的问题。只需使用此HTML标记即可： <div parallax="moveDown">...</div> 当您向下滚动时它将向下移动，而当您向上滚动时将向上移动...

— elixon

89

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

知道这一点后，我们可以将该技术与“ +”和“〜”之类的邻近选择器结合使用，以通过目标元素选择ID与当前网址的哈希值匹配的其他任何元素。一个例子就是您要的东西。

— 耶稣·贝加拉诺
source

5

您可以使用目标技术来确定布局中的任何元素，甚至页面本身也选择'<body>'标签:)。

— Jesus Bejarano

2

说，为什么backface-visibility在以后的演示中需要？我们什么都不会翻转……

— Eliran Malka

17

对于想查看该动画最低要求的其他人，我进行了格式化等工作，以使其变得更容易确定jsfiddle.net/YYPKM/347

— Louis Maddox

3

我认为这里不可能灵活，对吗？转换需要真实的值，并且不能针对其他元素，对吗？

— Keenora Fluffball 2015年

2

@LouisMaddox添加header { position: fixed; left: 0; top: 0; z-index: 10; }小提琴的CSS可以确保链接始终可单击，因为现在单击2号将使1号不可单击。

— Gellie Ann

115

使用锚链接和滚动容器的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>

这是小提琴。

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

— 费利克斯·埃德尔曼
source

9

为什么要投票？您能否解释一下如何改善答案或为什么我的解决方案不好？

— 菲利克斯·埃德曼

1

我实际上从未想过水平滚动。但是，正如您在此小提琴中所看到的：jsfiddle.net/1Lfybv56/2一样，它也可以正常工作-水平和垂直滚动也可以。我发现的唯一区别是：水平滚动时，指向name =“ ...”标签的锚链接不起作用，您必须使用id =“ ...”。

— Felix Edelmann

3

您不满意，因为在caniuse.com/#search=scroll-behavior上它说它仅在Firefox中有效。因此，对于生产级别的网站而言，它基本上毫无价值，因为它只能在一种使用率最高的浏览器中使用。除非如此，您网站上的流量大部分都是Firefox。

— MeanMatt

2

Jesus的解决方案确实很棒，但是我要补充一下Felix的答案，因为它可以在Chrome v62，Firefox v57中运行，并且在Edge（正在考虑不支持Safari）中正在考虑中，我们想对浏览器制造商施加压力。因此，这是我给我的学生提供的那些浏览器的简单示例，同时还具有平滑滚动的“顶部”链接：daveeveritt.github.io/css-smooth-scroll回购在此处包含更多信息和自述文件中的链接：github .com / DaveEveritt / css-smooth-scroll

— Dave Everitt

1

它可以在极古老的Chrome和Firefox版本以及三星浏览器中使用。在我撰写此评论之时，在我所有的站点上，这些浏览器的不受支持的版本都占据了微不足道的市场份额。这里的担心主要是缺乏对Safari的支持，并且在某种程度上缺少IE和Edge。但是...考虑到它多么优雅，这又是什么非必需的功能，这个答案可能吸引了很多人（出于这个原因，它吸引了我。）

— cazort

-2

您可以通过将所有内容包装在.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/acauamontiel/pen/zxxebb?editors=0010

— AcauãMontiel
source

2

-1; 这个问题要求仅使用CSS的解决方案，但您的答案完全是JavaScript。

— Mark Amery

-3

对于启用了Webkit的浏览器，我取得了不错的成绩：

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

这使得滚动的行为更像是标准浏览器的行为-至少在我们测试的iPhone上，滚动效果很好！

希望能有所帮助，

埃德

— 埃德·哈斯汀·埃文斯
source

3

我阅读了-webkit-overflow-scrolling属性的MDN规范，并且我认为它只是在您滚动手势时改变了行为。发问者想到了自动滚动（因此您只需轻按按钮/链接，而不必向下滑动或移动滚动条）；-)。顺便说一句，overflow-x: auto在大多数情况下效果更好，因为它仅在确实有滚动内容时才显示滚动条（scroll始终显示滚动条）。

— Felix Edelmann