移动端滚动穿透问题

    0
js
<template> <div @click="handleHambergerClick"></div> </template> <script> export default { name: 'BaseHeaderMobile', data() { return { isHeaderVisible: false, }; }, methods: { handleHambergerClick() { // hack: 滑动穿透问题 if (!this.isHeaderVisible) { this.lockBody(); } else { this.resetBody(); } this.isHeaderVisible = !this.isHeaderVisible; }, lockBody() { const { body } = document; const scrollTop = document.body.scrollTop || document.documentElement.scrollTop; body.style.position = 'fixed'; body.style.width = '100%'; body.style.top = `-${scrollTop}px`; }, resetBody() { const { body } = document; const { top } = body.style; body.style.position = ''; body.style.width = ''; body.style.top = ''; document.body.scrollTop = -parseInt(top, 10); document.documentElement.scrollTop = -parseInt(top, 10); }, }, }; </script>
评论区

共有评论 0

暂无评论