Question

我不想使用JQuery来执行此操作。目前，我使用Polymer创建了一个列表视图。我在<template is="dom-repeat">的父级div内使用list。

CSS如下。当我向列表添加新项目时，我希望列表自动滚动到底部。这可能吗？

.list {
  @apply(--layout-flex);
  @apply(--layout-vertical);
  position: relative;
  overflow: auto;
}

Answer 1

您可以将div的{{3}}设置为scrollTop，以便自动滚动到底部：

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo',
    properties: {
      items: {
        type: Array,
        value: () => []
      }
    },
    _addItem: function() {
      this.push('items', this.items.length+1);
      Polymer.RenderStatus.afterNextRender(this, () => {
        this.$.list.scrollTop = this.$.list.scrollHeight;
      });
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <style>
        #list {
          border: solid 1px gray;
          width: 100%;
          height: 100px;
          overflow: auto;
        }
      </style>
      <button on-tap="_addItem">Add item</button>
      <div id="list">
        <template is="dom-repeat" items="[[items]]">
          <div>[[item]]</div>
        </template>
      </div>
    </template>
  </dom-module>
</body>

scrollHeight

使用vanilla Javascript / CSS - Polymer自动滚动到底部

1 个答案: