Hice un botón de desplazamiento hacia arriba y hacia abajo. Mi intención es ocultar ambos botones en las páginas que no contienen solo la barra de desplazamiento vertical. Sin embargo, solo el botón de desplazamiento hacia arriba desaparece en las páginas que no tienen barra de desplazamiento vertical. Si el usuario hace clic en el botón de desplazamiento hacia arriba, se dirigirá al usuario a la parte superior de la página y, como resultado, el ícono de desplazamiento hacia arriba cambia al ícono de desplazamiento hacia abajo que permite al usuario ir al final de la página. Entonces, el problema surge aquí, cuando cambia para desplazarse al icono inferior, el botón permanecerá en todas las páginas, incluidas las páginas que no tienen barra de desplazamiento vertical. Para el botón de desplazamiento hacia arriba, no sucede así, ya que desaparecerá en las páginas que no tienen barra de desplazamiento vertical, pero no para el botón de desplazamiento hacia abajo. Este problema ocurre cuando aparece el botón de desplazamiento hacia abajo. ¿Alguna idea para arreglar esto?

ScrollToTop.vue

 <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> </template> <script> export default{ , 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' }) }, } } </script>

Default.vue

 <script> export default { name: "DefaultLayout", data() { return { hasScroll: false }; }, methods: { hasVerticalScroll() { this.hasScroll = document.body.offsetHeight > window.innerHeight; } } } </script> <template> <v-app dark v-scroll="hasVerticalScroll"> <ScrollToTop v-if="hasScroll"></ScrollToTop> </v-app> </template>