我编写好了返回顶部的按钮逻辑，为什么在真机上调试会无效？

在电脑端上调试没问题，手机端就不行

leepulse 2021-11-12

源自：项目：仿京东到家首页开发 2-2 使用Scss 组织地址区域布局

收起

2回答

好帮手慕久久回答被采纳获得+3积分 2021-11-13 09:56:39

同学你好,由于移动端不支持 document.documentElement.scrollTop这个属性，导致移动端滚动不了，建议做如下调整：

const backTop = setInterval(() => {

document.documentElement.scrollTop -= 100;

document.body.scrollTop -= 100;

var nowTop = document.documentElement.scrollTop || document.body.scrollTop;

if (nowTop <= 0) {

clearInterval(backTop);

}

}, 20);

祝学习愉快！

收起回答

好帮手慕久久 2021-11-12 18:31:57

同学你好，建议把代码粘贴出来，顺便说一下是哪种机型，老师测试一下，再为你解答。

祝学习愉快！

收起回答

提问者 leepulse #1

<template>
<div class="wrapper" ref="wrapper">
<Publish />
<Selects />
<Comment />
<Package />
<button class="receive" v-show="show">
<img class="receive__btn" src="./assets/banner14.ca023c2c.png" @click="handleBtnTop"/>
</button>
</div>
</template>

<script>
import { ref, onMounted } from "vue";
import Publish from "./components/Publish.vue";
import Selects from "./components/Selects.vue";
import Comment from "./components/Comment.vue";
import Package from "./components/Package.vue";

export default {
name: "App",
components: {
Publish,
Selects,
Comment,
Package,
},
setup() {
const wrapper = ref(null);
const show = ref(false);
const handleBtnTop = () => {
clearInterval(backTop);
const backTop = setInterval(() => {
document.documentElement.scrollTop -= 100;
if (document.documentElement.scrollTop < 500) {
clearInterval(backTop);
}
}, 20);
};

onMounted(() => {
window.addEventListener("scroll", () => {
wrapper.value = document.documentElement.scrollTop || window.scrollY;
if (wrapper.value > 500) {
show.value = true;
} else {
show.value = false;
}
});
});

return { wrapper, show, handleBtnTop };
},
};
</script>

<style lang="scss">
.wrapper {
background-color: #ca2322;
.receive {
width: 2.6rem;
position: fixed;
left: 50%;
bottom: 0.1rem;
margin-left: -1.3rem;
background: none;
animation: btnFrame 2s linear infinite;
&__btn {
width: 100%;
vertical-align: middle;
}
}
@keyframes btnFrame {
50% {
transform: scale(1.1);
transform-origin: center;
}
}
}
</style>

2021-11-12 22:04:20