Чтобы прокрутить элемент
Vue.js вниз, вы можете использовать следующие методы:
Метод 1: использование JavaScript ScrollIntoView():
<template>
<div ref="scrollContainer" class="scroll-container">
<!-- Content here -->
</div>
</template>
<script>
export default {
mounted() {
this.scrollToBottom();
},
methods: {
scrollToBottom() {
this.$nextTick(() => {
const container = this.$refs.scrollContainer;
container.scrollTop = container.scrollHeight;
});
}
}
};
</script>
<style>
.scroll-container {
overflow-y: scroll;
/* Other styling properties */
}
</style>
Метод 2: использование Vue.js и плагина Vue-scrollto:
npm install vue-scrollto
<template>
<div ref="scrollContainer" class="scroll-container">
<!-- Content here -->
</div>
</template>
<script>
import VueScrollTo from 'vue-scrollto';
export default {
mounted() {
this.scrollToBottom();
},
methods: {
scrollToBottom() {
this.$nextTick(() => {
VueScrollTo.scrollToBottom(this.$refs.scrollContainer);
});
}
}
};
</script>
<style>
.scroll-container {
overflow-y: scroll;
/* Other styling properties */
}
</style>
Метод 3. Использование пользовательской директивы:
<template>
<div v-scroll-to-bottom class="scroll-container">
<!-- Content here -->
</div>
</template>
<script>
export default {
directives: {
scrollToBottom: {
inserted: function (el) {
el.scrollTop = el.scrollHeight;
}
}
}
};
</script>
<style>
.scroll-container {
overflow-y: scroll;
/* Other styling properties */
}
</style>