检查用户是否滚动到底部 [英] Check if user scrolled to bottom
本文介绍了检查用户是否滚动到底部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
仅当用户滚动底部 > 250 时才需要显示按钮 backtotop.我该怎么做?
我的代码:
<div><button v-if="checkScroll" class="goTop" @click="backToTop"><i class="fa fa-angle-up" aria-hidden="true"></i></模板><脚本>导出默认{方法: {计算:{检查滚动(){如果 ($(document).scrollTop() > 250) {返回真；} 别的 {返回假；}}},回到顶部() {this.$scrollTo('html');},}}
我的代码不起作用.我不明白的错误.按钮已隐藏.
解决方案
另外别忘了销毁事件:
new Vue({el: "#app",数据() {返回 {滚动:空}},方法: {句柄滚动(e){this.scroll = window.scrollY ||window.scrollTop}},创建(){window.addEventListener('scroll', this.handleScroll);},销毁(){window.removeEventListener('scroll', this.handleScroll);}})html {高度:3000px；/* 一些用于演示目的的随机高度 */}按钮 {位置:固定；}<script src="https://cdn.jsdelivr.net/npm/vue@2.6.2/dist/vue.js"></script><!-- 滚动查看按钮--><div id="应用程序"><button v-show="scroll > 250">foobar</button>I need show button backtotop only if user has scrolled bottom > 250. How I can do it?
My code:
<template>
<div>
<button v-if="checkScroll" class="goTop" @click="backToTop">
<i class="fa fa-angle-up" aria-hidden="true"></i>
</button>
</div>
</template>
<script>
export default {
methods: {
computed: {
checkScroll() {
if ($(document).scrollTop() > 250) {
return true;
} else {
return false;
}
}
},
backToTop() {
this.$scrollTo('html');
},
}
}
</script>
My code is not working. Errors I do not get. Button is hidden.
解决方案
Also don't forget to destroy the event:
new Vue({
el: "#app",
data() {
return {
scroll: null
}
},
methods: {
handleScroll(e) {
this.scroll = window.scrollY || window.scrollTop
}
},
created() {
window.addEventListener('scroll', this.handleScroll);
},
destroyed() {
window.removeEventListener('scroll', this.handleScroll);
}
})
html {
height: 3000px; /* some random height for demonstration purpose */
}
button {
position: fixed;
}
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.2/dist/vue.js"></script>
<!-- scroll to see the button -->
<div id="app">
<button v-show="scroll > 250">foobar</button>
</div>
这篇关于检查用户是否滚动到底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
