如何实现Vue项目移动端滚动穿透
这篇文章主要为大家展示了如何实现Vue项目移动端滚动穿透,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。
创新互联建站服务紧随时代发展步伐,进行技术革新和技术进步,经过10余年的发展和积累,已经汇集了一批资深网站策划师、设计师、专业的网站实施团队以及高素质售后服务人员,并且完全形成了一套成熟的业务流程,能够完全依照客户要求对网站进行网站制作、成都网站建设、建设、维护、更新和改版,实现客户网站对外宣传展示的首要目的,并为客户企业品牌互联网化提供全面的解决方案。
概述
今天在做 Vue 移动端项目的时候遇到了滚动穿透问题,在网上查资料后,选取了我觉得最好的方法,记录下来供以后开发时参考,相信对其他人也有用。
上层无需滚动
如果上层无需滚动的话,直接屏蔽上层的 touchmove 事件即可。示例如下:
我是里面的内容
上层需要滚动
如果上层需要滚动的话,那么固定的时候先获取 body 的滑动距离,然后用 fixed 固定,用 top 模拟滚动距离;不固定的时候用获取 top 的值,然后让 body 滚动到之前的地方即可。示例如下:
以上就是关于如何实现Vue项目移动端滚动穿透的内容,如果你们有学习到知识或者技能,可以把它分享出去让更多的人看到。
分享标题:如何实现Vue项目移动端滚动穿透
当前URL:http://scyanting.com/article/jdodis.html