Hice un botón de desplazamiento hacia arriba y hacia abajo, que permite a los usuarios desplazarse hacia arriba y hacia abajo cuando se hace clic en él. Por ahora, si el botón es un icono/botón de desplazamiento hacia arriba, el botón aparecerá en las páginas que solo contienen una barra de desplazamiento vertical y desaparecerá en las páginas que no la tengan. Sin embargo, si el botón cambia a icono/botón de desplazamiento hacia abajo, el botón aparecerá en ambas páginas que contienen barra de desplazamiento y no barra de desplazamiento. ¿Cómo hago para que desaparezca el botón de desplazamiento hacia abajo en una página que no contiene barra de desplazamiento vertical? Espero que alguien pueda ayudarme en 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>if ($(document).height() > $(window).height()) { // scrollbar }Al usar jQuery, esto indicará cuándo está presente una barra de desplazamiento vertical. Desde aquí puede controlar si mostrar u ocultar el botón.
Probar esto
<template> <div> <div v-if="showMoveToBottom" class="d-flex mb-2 justify-center align-center scroll-to-bottom-btn"> <v-btn small absolute elevation="1" fab @click="onScrollToBottom"> <v-icon color="primary">mdi-chevron-down</v-icon> </v-btn> </div> <div @scroll="onScroll"> Your body goes here </div> </div> <script> export default{ date(){ return { showMoveToTop: false, // Consider this part ===> by default both buttons should not be visible, buttons visibility is gonna change according to div. showMoveToBottom: false } }, methods: { onScroll(e){ const { target } = e; if (target.clientHeight * 2 + target.scrollTop < target.scrollHeight) { this.showMoveToBottom = true; } else { this.showMoveToBottom = false; } }, onScrollToBottom(){ console.log("scrool to bottom called"); } } } </script> <style scoped> .scroll-to-bottom-btn { position: absolute; bottom: 83px !important; left: 0; right: 0; } </style>El mismo caso que puede hacer para su scrollToTop.