Solo quiero mostrar el botón de desplazamiento hacia arriba/abajo en la página que tiene una barra de desplazamiento vertical. Sin embargo, el botón no aparece cuando la página contiene una barra de desplazamiento vertical. ¿Hay alguna idea de cómo implementar esta función?
ScrollToTopBottom.vue
<template> <div v-if= "hasVerticalScroll" v-scroll="onScroll" > <v-btn v-if = "!isVisible" fab fixed bottom right color="primary" @click="toBottom"> <v-icon>mdi-arrow-down-bold-box-outline</v-icon> </v-btn> <v-btn v-else fab fixed bottom right color="primary" @click="toTop"> <v-icon>mdi-arrow-up-bold-box-outline</v-icon> </v-btn> </div> </template> <script> export default{ data () { return { isVisible: false, position: 0, } }, methods: { onScroll () { this.isVisible = window.scrollY > 500 }, toTop () { this.position = window.scrollY window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }) }, toBottom(){ let pos = this.position > 0 ? this.position : document.body.scrollHeight window.scrollTo({ top: pos, behavior: 'smooth' }) }, }, computed: { hasVerticalScroll(){ console.log('offsetHeight',document.body.offsetHeight); console.log('windowinner',window.innerHeight); return document.body.offsetHeight > window.innerHeight; } } } </script>Puede mover hasVerticalScroll al método en el componente principal y escuchar el evento de desplazamiento:
Vue.component('scrollToTopButton', { template: ` <div v-scroll="onScroll" > <v-btn v-if="!isVisible" fab fixed bottom right color="primary" @click="toBottom"> <v-icon>mdi-arrow-down-bold-box-outline</v-icon> </v-btn> <v-btn v-else fab fixed bottom right color="primary" @click="toTop"> <v-icon>mdi-arrow-up-bold-box-outline</v-icon> </v-btn> </div> `, data () { return { isVisible: false, position: 0 } }, methods: { onScroll() { this.isVisible = window.scrollY > 50 }, toTop() { this.position = window.scrollY window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }) }, toBottom(){ let pos = this.position > 0 ? this.position : document.body.scrollHeight window.scrollTo({ top: pos, behavior: 'smooth' }) }, }, }) new Vue({ el: "#demo", vuetify: new Vuetify(), data() { return { hasScroll: false } }, methods: { hasVerticalScroll() { this.hasScroll = document.body.offsetHeight > window.innerHeight; } } }) <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> <div id="demo" > <v-app v-scroll="hasVerticalScroll"> <v-main> <v-container > <div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div> <div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div> <scroll-to-top-button v-if="hasScroll" ></scroll-to-top-button> </v-container> </v-main> </v-app> </div>