使用Web動畫對DOM屬性（scrollTop）進行動畫處理

Question

Web Animations是新的w3c規范 ，只是為了清楚我們在說什么。 無論哪種方式，我都想平滑地滾動到某個元素。 使用jQuery的Animate函數，這總是很容易的，但是對於Web Animations來說似乎並不那么簡單。 有什么方法可以使用Web Animation計時功能並將其應用於DOM屬性（ scrollTop ）。 我問的原因是，我不想加載整個（額外的）庫只是為了使用其插值功能，而在我的其余應用程序中使用不同的技術/庫來完成它。

Answer 1

您可以使用自定義效果為scrollTop設置動畫，例如

var a = new Animation(el, function(time) {
    el.scrollTop = el.scrollTop + time * 500;
}, 1000);

Answer 2

為了便於說明，請從Yvonne的答案開始，使用核心動畫：

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/core-animation/core-animation.html">

<polymer-element name="animated-scroll">
  <template>

    <style>
      #scroller {
        height: 300px;
        overflow-y: scroll;
      }
    </style>
    <button on-tap="{{animate}}">Scroll it</button>
    <div id="scroller">
      <content></content>
    </div>
    <core-animation id="animation" duration="400" easing="ease-in-out"></core-animation>

  </template>
  <script>
    (function () {

      Polymer({
        animate: function (e) {
          var start = this.$.scroller.scrollTop;
          var end = 500; // px
          var delta = end - start;
          this.$.animation.target = this.$.scroller;
          this.$.animation.customEffect = function (timeFraction, target, animation) {
            target.scrollTop = start + delta * timeFraction;
          };
          this.$.animation.play();
        }
      });

    })();
  </script>
</polymer-element>