收藏
评论

​scroll-view滚动穿透处理,阻止滚动

scroll-view滚动穿透,阻止滚动

页面弹窗阻止滚动是一种常见的问题,这里简单介绍小程序scroll-view的一种解决方式

常用阻止滚动方式

在不使用scroll-view的弹窗中, 为position为absolute或fixed的元素设置catchtouchmove空事件就可以阻止弹窗下的页面因事件穿透滚动

<view catchtouchmove="doNothing"></view>

也可直接写catchtouchmove,相当于绑定了事件名为true的事件

问题场景

在小程序中,在absolute或fixed的类弹窗布局中。要显示列表、长文本段落等可滚动元素,必须使用scroll-view组件,无法阻止页面本身的滚动

解决办法

既然无法简单的阻止事件穿透,就在页面可滚动的元素本身想想办法:

页面滚动元素

小程序中的简单布局,在页面内容超出一屏时,滚动的元素是page

如何让页面不滚动

将page的高度设为100%,页面最外层放一个view,打开弹窗时通过一个class增加样式,设页面高度100%,overflow: hidden来停止滚动
打开弹窗时设isStopBodyScroll为true,关闭时设为false

<view class="{{isStopBodyScroll ? 'scroll-lock' : ''}}">  <!-- 页面内容 --></view>
.scroll-lock {  height: 100%;  overflow-y: hidden;}

存在的问题

这样设置页面会回到顶部,期待有更好的解决方式或官方对这个问题提供支持

喜欢的话请关注,点赞,收藏~谢谢阅读!

最后一次编辑于  2018-08-19  (未经腾讯允许,不得转载)
复制链接收藏赞 2