I made a scroll to top and bottom button, which allow users to scroll to top and scroll to bottom when it is clicked. As for now , if the button is scroll-to-top icon/button, the button will appear in pages that contain vertical scrollbar only and disappear in pages that do not have vertical scrollbar. However , if the button changes to scroll-to-bottom icon/ button, the button will appear in both pages that contain scrollbar and no scrollbar. How do i make scroll to bottom button disappear in a page that do not contain vertical scrollbar? Hope someone could help me on this.

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>

CodePudding user response：

if ($(document).height() > $(window).height()) {
    // scrollbar
}

Using jQuery this will indicate when a a vertical scroll bar is present. From here you can control whether to show or hide the button.

CodePudding user response：

Try this out

<template>
<div>
    <div v-if="showMoveToBottom" >
        <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>

The same case you can do for your scrollToTop.