小程序显示弹窗时禁止下层的内容滚动

snifes 发布于2019-08-23 16:07 / 2114人阅读

摘要：小程序显示弹窗时禁止下层的内容滚动小程序显示弹窗时禁止下层的内容滚动第一种方式利用禁止页面滚动一页面结构此处为整个页面的结构内容点击显示弹窗当为的时候显示弹窗此处为弹窗内容二部分添加一个类名把弹窗的下层内容定位为实现禁

小程序显示弹窗时禁止下层的内容滚动

① 第一种方式
利用position:fixed. 禁止页面滚动.

一. 页面结构html

-----------此处为整个页面的结构内容

// 当proInfoWindow为true的时候显示弹窗
此处为弹窗内容
二. CSS部分

//添加一个类名, 把弹窗的下层内容定位为fixed.实现禁止滚动的效果
.indexFixed{
position: fixed;
top:0;//top:0可不写,否则显示弹窗的同时会使底层滚动到顶部.
left:0;
bottom:0;
right:0;
}
三. JS部分

Page({
data: {

proInfoWindow:false,//控制弹窗是否显示

// 点击弹窗事件, 设置proInfoWindow为true, 显示弹窗.
// 设置proInfoWindow为true的同时, 给页面添加了一个class名为indexFixed的类.显示弹窗时下层就禁止滚动,关掉弹窗时就可以滚动.

_proInfoWindowShow(){

  this.setData({
    proInfoWindow:true
})

}
})

②第二种方式

用 catchtouchmove="return"

//此处为弹窗内容
//外层加 catchtouchmove="return"仅触摸背景区域时不穿透底部.

 //在每个小的区域内加 catchtouchmove="return"
 // 有需要滚动的列表区域位置不要加 catchtouchmove="return", 否则列表无法滚动
    滚动列表1
    滚动列表2
    滚动列表3
    滚动列表4

GPU云服务器云服务器弹窗时弹窗时不小程序滚动到图片js 小程序内容

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102709.html

小程序显示弹窗时禁止下层的内容滚动

摘要：小程序显示弹窗时禁止下层的内容滚动小程序显示弹窗时禁止下层的内容滚动第一种方式利用禁止页面滚动一页面结构此处为整个页面的结构内容点击显示弹窗当为的时候显示弹窗此处为弹窗内容二部分添加一个类名把弹窗的下层内容定位为实现禁小程序显示弹窗时禁止下层的内容滚动小程序显示弹窗时禁止下层的内容滚动 ① 第一种方式利用position:fixed. 禁止页面滚动. 一. 页面结构html ...

ddongjian0000 2019-08-30 15:56 评论0 收藏0
跳出弹窗页面禁止滚动（PC端和手机端）

摘要：端如何实现当弹窗显示时，为元素添加属性当关闭弹窗时移除该属性即可在弹窗的上设置你要显示的内容出现弹窗时，为元素添加，这样主页面就禁止滑动，同时很好地解决了弹窗穿透的问题。由于无法取消，因此事件监听器无法阻止页面呈现。 pc端如何实现 1.当弹窗显示时，为body元素添加属性：overflow：hidden, 当关闭弹窗时移除该属性即可2.在弹窗的div上设置 @scroll.sto...

HmyBmny 2019-08-23 13:49 评论0 收藏0
跳出弹窗页面禁止滚动（PC端和手机端）

摘要：端如何实现当弹窗显示时，为元素添加属性当关闭弹窗时移除该属性即可在弹窗的上设置你要显示的内容出现弹窗时，为元素添加，这样主页面就禁止滑动，同时很好地解决了弹窗穿透的问题。由于无法取消，因此事件监听器无法阻止页面呈现。 pc端如何实现 1.当弹窗显示时，为body元素添加属性：overflow：hidden, 当关闭弹窗时移除该属性即可2.在弹窗的div上设置 @scroll.sto...

atinosun 2019-08-29 17:26 评论0 收藏0