Ich muss die Scroll eines Div aktualisieren, nachdem es gerendert wurde. In echtem Code ist das div mit dem Ergebnis eines asynchronen Aufrufs gefüllt, mit vielen Zeilen und Spalten, aber ich habe diesen Codepen erstellt, um das Problem zu sehen.Vue js updaten scrollTop
<div id="app">
<button @click="doScroll()">Scroll</button>
<div id="content" v-for="x in xs">
<span v-for="y in ys">{{x}}{{y}} </span>
</div>
</div>
var vm = new Vue({
el: "#app",
mounted: function(){
},
data: {
xs: 0,
ys: 0
},
updated: function(){
$('#app').scrollTop(200);
},
created: function(){
var vm = this;
setTimeout(function(){
vm.xs=30;
vm.ys=30
},1000);
},
methods: {
doScroll: function(){
$('#app').scrollTop(200);
}
}
})
https://codepen.io/kNo/pen/BJKmbE?editors=1111
Wie man sehen kann, ist die scrollTop nur auf die Schaltfläche Click-Ereignis aktualisiert.
Wie kann die Eigenschaft scrollTop automatisch aktualisiert werden, nachdem das div gerendert wurde?
Sie kann scrollbehaviour in vue-router verwenden, um dies zu erreichen. Sie benötigen keine zusätzlichen Bibliotheken, wenn Sie SPA-Frameworks verwenden. – divine