scrollTop使用vue.js计算

Question

这是我的部分代码

<template>
<button v-show="visible" @click="backToTop">👆</button>
</template>
<script lang="ts">
export default {
computed: {
visible() {
return document.documentElement.scrollTop != 0
}
}
}
</script>

当我滚动页面到顶部时，按钮不会消失。

Answer 1

您需要监听滚动事件，尝试下面的代码片段:

const app = Vue.createApp({
data() {
return {
visible: false
}
},
methods: {
handleScroll (event){
this.visible = window.scrollY != 0 ? true : false
},
backToTop() {
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
})
}
},
created () {
window.addEventListener('scroll', this.handleScroll);
},
destroyed () {
window.removeEventListener('scroll', this.handleScroll);
},
})
app.mount('#demo')

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<p>x</p><p>x</p><p>x</p><p>x</p>
<button v-show="visible" @click="backToTop">👆</button>
<p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p>
</div>

Answer 2

try:

window.scrollY

这将检测滚动你的文档和它的值的变化基于当前滚动位置

要访问窗口的滚动高度，您需要访问window而不是document