前端之家收集整理的这篇文章主要介绍了
微信小程序scroll-view实现滚动穿透和阻止滚动的方法,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_403_0@
scroll-view滚动穿透,阻止滚动
@H_
403_0@
页面弹窗阻止滚动是一种常见的问题,这里简单介绍
小程序scroll-view的一种
解决方式
@H_
403_0@
常用阻止滚动方式
@H_
403_0@在不使用scroll-view的弹窗中,为position为absolute或fixed的元素设置catchtouchmove空事件就可以阻止弹窗下的
页面因事件穿透滚动
@H_
403_0@也可直接写catchtouchmove,相当于绑定了事件名为true的事件
@H_
403_0@
问题场景
@H_
403_0@在
小程序中,在absolute或fixed的类弹窗布局中。要
显示列表、长文本段落等可滚动元素,必须使用scroll-view组件,无法阻止
页面本身的滚动
@H_
403_0@
@H_
403_0@既然无法简单的阻止事件穿透,就在
页面可滚动的元素本身想想办法:
@H_
403_0@
@H_
403_0@
小程序中的简单布局,在
页面内容超出一屏时,滚动的元素是page
@H_
403_0@
如何让页面不滚动
@H_
403_0@将page的高度设为100%,
页面最外层放一个view,打开弹窗时通过一个class
增加样式,设
页面高度100%,overflow: hidden来停止滚动
@H_
403_0@打开弹窗时设isStopBodyScroll为true,
关闭时设为false
@H_
403_0@
存在的问题
@H_
403_0@这样设置
页面会回到顶部,期待有更好的
解决方式或官方对这个问题提供
支持
@H_
403_0@以上就是本文的全部
内容,希望对大家的学习有所帮助,也希望大家多多
支持编程之家。