如何获取javascript中的当前滚动位置？

Question

目前，我正在研究滚动到顶部按钮的功能。

按钮可滚动到底部时显示。我想记住单击滚动到顶部按钮时的最后位置。所以当用户点击滚动到底部按钮时，它会return到最后一个位置。

是否有更好的方法来检索当前滚动位置？

ScrollToTopBottom.vue

<template>

    <div v-if="showScroll" 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,
        hasVScroll: false,
    }
  },
   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'
      })
    },
    showScroll(){
      this.hasVScroll = document.body.scrollHeight > document.body.clientHeight;
    }
  }
}

</script>

</script>

Answer 1

您可以在点击顶部按钮时保存您的位置，然后在点击底部按钮时查看：

Vue.component('scrollToTopButton', {
  template: `
    <div v-scroll="onScroll" v-if="hasVerticalScroll">
      <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'
      })
    },
  },
  computed: {
    hasVerticalScroll(){
      return document.body.offsetHeight > window.innerHeight;
    }
  }
})
new Vue({
  el: "#demo",
  vuetify: new Vuetify(),
  
})

<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-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><div>a</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><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div>
        <scroll-to-top-button />
      </v-container>
    </v-main>
  </v-app>
</div>

如何获取javascript中的当前滚动位置？

How to get the current scroll position in javascript?

javascript

vue.js

vuejs2