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

本文介绍了使用香草Javascript/CSS自动滚动到底部-Polymer的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我不想使用JQuery来做到这一点.目前，我已经使用Polymer创建了一个列表视图.我在具有list类的父div中使用<template is="dom-repeat">.

I don't want to use JQuery to do this. Currently, I've created a listview using Polymer. I'm using <template is="dom-repeat"> inside a parent div with a class of list.

CSS如下.当我向列表中添加新项目时，我希望列表自动滚动到底部.有可能吗?

The CSS is as follows. As I add new items to the list, I would like the list to scroll to the bottom automatically. Is that possible?

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

推荐答案

您可以设置div的 scrollTop 到 scrollHeight 以便自动滚动到底部:

You can set the div's scrollTop to scrollHeight in order to automatically scroll to the bottom:

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>

codepen

这篇关于使用香草Javascript/CSS自动滚动到底部-Polymer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！