求Polymer 2.x中iron-scroll-target-behavior的可用演示实例

嘿，我之前也找过这个behavior的演示，确实官方直接放的在线实例不算多，不过我可以给你分享几个实用的获取途径，还有一个极简的可运行示例帮你快速上手：

首先，你可以通过这些方式找到可用的示例：

• 组件仓库的demo目录：这个behavior的官方GitHub仓库里自带了演示文件，直接查看源码里的demo文件夹，就能看到基础的使用示例，比如绑定不同滚动目标（窗口、自定义容器）、监听滚动事件的实现逻辑。
• 社区在线代码示例：搜索关键词“iron-scroll-target-behavior scroll to top”，能找到不少开发者在CodePen/JSFiddle上分享的现成运行示例，大多是结合按钮实现滚动到顶部的场景，正好匹配你的需求。

我也整理了一个极简的可运行示例，直接存成HTML文件就能在浏览器里测试：

<!DOCTYPE html>
<html>
<head>
  <script src="https://polygit.org/polymer+v2.0.0/webcomponentsjs+v1.0.0/components/webcomponentsjs/webcomponents-loader.js"></script>
  <link rel="import" href="https://polygit.org/polymer+v2.0.0/webcomponentsjs+v1.0.0/components/polymer/polymer-element.html">
  <link rel="import" href="https://polygit.org/polymer+v2.0.0/webcomponentsjs+v1.0.0/components/iron-scroll-target-behavior/iron-scroll-target-behavior.html">
</head>
<body>
  <dom-module id="scroll-to-top-demo">
    <template>
      <style>
        :host {
          display: block;
          height: 2000px;
          padding: 20px;
        }
        #scrollBtn {
          position: fixed;
          bottom: 20px;
          right: 20px;
          padding: 10px;
          cursor: pointer;
          background: #4285f4;
          color: white;
          border: none;
          border-radius: 4px;
        }
      </style>
      
      <h1>往下滚动页面试试👇</h1>
      <button id="scrollBtn" on-click="_scrollToTop">回到顶部</button>
    </template>
    
    <script>
      class ScrollToTopDemo extends Polymer.mixinBehaviors([Polymer.IronScrollTargetBehavior], Polymer.Element) {
        static get is() { return 'scroll-to-top-demo'; }
        
        static get properties() {
          return {
            scrollTarget: {
              type: Object,
              value: function() {
                return window; // 绑定整个浏览器窗口作为滚动目标
              }
            }
          };
        }
        
        _scrollToTop() {
          // 调用behavior提供的scrollToTop方法，实现平滑滚动
          this.scrollToTop({behavior: 'smooth'});
        }
      }
      customElements.define(ScrollToTopDemo.is, ScrollToTopDemo);
    </script>
  </dom-module>
  
  <scroll-to-top-demo></scroll-to-top-demo>
</body>
</html>

如果需要针对自定义滚动容器（比如带overflow的div）实现功能，只需要修改scrollTarget的指向：

scrollTarget: {
  type: Object,
  value: function() {
    return this.$.customScrollContainer;
  }
}

然后在模板里添加对应的容器：

<div id="customScrollContainer" style="height: 500px; overflow: auto;">
  <!-- 这里放入长内容 -->
</div>

内容的提问来源于stack exchange，提问作者Let Me Tink About It