使用香草Javascript/CSS自动滚动到底部-Polymer [英] Scroll to bottom automatically using vanilla 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的 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>
这篇关于使用香草Javascript/CSS自动滚动到底部-Polymer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
