我正在使用rails中的ajax请求创建一个聊天,我正试图让div滚动到底部而没有太多运气.
我在这个div中包装一切:
#scroll {
height:400px;
overflow:scroll;
}
有没有办法让它默认使用JS滚动到底部？
有没有办法让它在ajax请求后滚动到底部？
考虑一下我有一个问题清单.当我点击第一个问题时,它会自动将我带到页面底部.
事实上,我知道这可以使用jQuery完成.
那么,你能给我一些文件或一些链接,我可以找到这个问题的答案吗？
编辑:需要滚动到页面底部的特定HTML 元素
在我的组件中，我有一个消息数组。
data: function () {
return {
messages: [],
first_load: false
...
}
在创建我的组件后，该消息数组最初由 Ajax 调用填充。数据来自服务器后，我只需将其推送到消息变量中，它会令人惊讶地在 UI 中绘制所有消息，但在推送数据后，我尝试滚动到 UI 底部，以便用户仅观看最新内容。
data.body.data.messages.map((message) => {
this.messages.push(message)
}
this.scroll_bottom()
我注意到，在推送数据后执行简单的 javascript 滚动底线将不起作用，因为 UI 会异步刷新（当我 .push 到我的数组时，它不会在同步 UI 之前执行下一行），所以我最终添加超时然后滚动底部，但我认为这是非常可耻的。
我的黑客：
watch: {
messages:{
handler: function (val, oldVal) {
if (!this.first_load) {
this.first_load = true
setTimeout(() => {
this.scroll_bottom()
}, 1000);
}
},
deep: true
}
}
关于如何利用这一点有什么想法吗？谢谢！
我有一个具有无序列表的组件，我要做的是在加载组件时将组件向下滚动到
<b-card no-body header="<i class='fa fa-align-justify'></i> Unorderd List" style="height: 680px">
<b-tabs card pills>
<b-tab v-for="debt in user_debts" :title="Debts list" :key="debt.id" class="card-height">
<table class="table table-sm amortization-header header-fixed">
<thead>
<tr>
<th>Month</th>
<th>Balance</th>
<th>Paid</th>
<th>Debt</th>
<th>Nominal Interest</th>
</tr>
</thead>
<tbody>
<tr v-for="month in amortization.schedule" :class="{'actual-month' : month.month == amortization.actual_month}">
<td>{{month.month}}</td>
<td>{{month.balance.toLocaleString()}}<span class="total">€</span></td>
<td>{{month.monthly_payment}}<span class="total">€</span></td>
<td>{{month.principle}}<span class="total">€</span></td>
<td>{{month.interest}}<span class="total">€</span></td>
</tr>
</tbody>
</table>
</b-tab>
</b-tabs>
</b-card>
我想向右滚动到一列。这是我试过的：
((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", element);
这适用于垂直滚动但不适用于水平滚动。