如何将滚动滚动到没有垂直滚动条的页面中的底部按钮？

Question

我对顶部和底部按钮进行了滚动，该按钮可以使用户滚动到顶部并在单击时滚动到底部。目前，如果按钮是滚动图标/按钮，则该按钮将出现在仅包含垂直滚动条的页面中，并且在没有垂直滚动条的页面中消失。但是，如果按钮更改为滚动到底部图标/按钮，则该按钮将出现在包含卷轴且无卷轴的两个页面中。如何使滚动到底部按钮消失在不包含垂直卷轴的页面中？希望有人可以帮助我。

scrolltopop.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>

Answer 1

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

使用jQuery，这将指示何时存在AA垂直滚动条。从这里，您可以控制是否显示或隐藏按钮。

Answer 2

尝试使用此

<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>

情况，可以为您的卷轴托普（Scrolltotop）做。