可能我们经常做这样的弹窗对吧,兴许我们绝对很简单,两下搞定:

  弹窗的页面结构代码:

       <!-- 弹窗模块  引用时移除static_tip类--><div class="mask" ontouchstart = "return false" style="display:none"></div><div class="main_venue_tip" style="display:none"><i class="close"></i><div class="h_tit"><i>新用户首单送券活动规则</i></div><div class="main_v_tcon scroll" id="scroll" style="overflow-y:auto;-webkit-overflow-scrolling:touch;"><p>(一)活动时间</p><p>2015年8月12日9:00:00-8月20日23:59:59</p><p>(二)活动限制:</p><p>1)参与活动用户须已有绑定微信账号的京东账号;</p><p>2)每个京东用户最多可获得2张不同面额的优惠券。不同微信号绑定同一京东账号多次参与活动的,则第一个参与本次活动的账号参与结果有效,其余账号参与结果均视为无效。</p><p>(三)参与方式:用户进入活动页点击“用钱砸”,完成转发好友和分享朋友圈的操作,即可有机会获得面额不等的优惠券。</p><p>(四)活动奖券:</p><p>1)奖品内容:本次活动以7元到77元不等面额优惠券组成,奖品数量有限,先到先</p><p>1)奖品内容:本次活动以7元到77元不等面额优惠券组成,奖品数量有限,先到先</p><p>1)奖品内容:本次活动以7元到77元不等面额优惠券组成,奖品数量有限,先到先</p><p>1)奖品内容:本次活动以7元到77元不等面额优惠券组成,奖品数量有限,先到先</p><p>1)奖品内容:本次活动以7元到77元不等面额优惠券组成,奖品数量有限,先到先</p><p>1)奖品内容:本次活动以7元到77元不等面额优惠券组成,奖品数量有限,先到先</p><p>1)奖品内容:本次活动以7元到77元不等面额优惠券组成,奖品数量有限,先到先</p></div></div>

   但是产品妹子要求,不能穿透底部滑动,那就bug了

  其实做为码奴的我,感觉效果不是蛮好的吗,只是内部滑动,滑到顶部,或滑到底部的时候,会出现穿透底部的滚动条。

  为了让产品那边通过,鉴于这个问题,我思考了两种办法。

  第一种,简单粗暴,这个内容滑动过程都交由js事件来完成(类似用iscroll.js实现滚动),那我们的最后效果将是下图

  内容里面变的没有滚动条,弹窗模块touchmove的时候e.preventDefault(),通过脚本滑动,代码如下(其实就是自己写个与iscroll类似的单一功能插件,苦逼吧,做码奴就是这样折腾人),还是上干货,就是这样:

    ~function(window,undefined){        prefix= function(){var _elementStyle = document.createElement('div').style;var vendors = ['msT','MozT', 'webkitT', 't'],transform,i = 0,l = vendors.length;for ( ; i < l; i++ ) {transform = vendors[i] + 'ransform';if ( transform in _elementStyle ) return vendors[i].substr(0, vendors[i].length-1);}return false;} ();function Scroll(opts){this.scrollElem = opts.scrollElem,this.scrollCon = opts.scrollCon,this.scrollwp = opts.scrollwp,this.CH = opts.scrollCon.offsetHeight - opts.scrollwp.offsetHeight,this.moveDis = 0,this.touchbool = false;this.init();}Scroll.prototype = {constructor:"Scroll",tweenmove:function(dis){var self = this;self.scrollCon.style.cssText = "-"+prefix+"-transform:translateY("+dis+"px) translateZ(0);-"+prefix+"-transition:-"+prefix+"-transform 0.2s linear";},move:function(dis){var self = this;self.scrollCon.style.cssText = "-"+prefix+"-transform:translateY("+dis+"px) translateZ(0)";},               init:function(){var _this = this,moveY,touchY;_this.scrollElem.addEventListener("touchstart",function(e){var e = e || window.event,touch=e.touches[0];e.preventDefault();touchY = touch.pageY;_this.touchbool = true;if(e.target.className.replace(/^\s$/g,"") == "close"){tip.style.display = "none";mask.style.display = "none";}},false);_this.scrollElem.addEventListener("touchmove",function(e){var e = e || window.event;e.preventDefault();if(_this.touchbool){var touch=e.touches[0];moveY = touch.pageY;                      if(moveY-touchY+_this.moveDis < 20 && moveY-touchY+_this.moveDis >(-_this.CH-20) ){_this.move(moveY-touchY+_this.moveDis);}}},false);_this.scrollElem.addEventListener("touchend",function(e){_this.moveDis = moveY-touchY+_this.moveDis;if(_this.moveDis>=0){_this.tweenmove(0);_this.moveDis = 0;}else if(_this.moveDis <= -_this.CH){_this.tweenmove(-_this.CH);_this.moveDis = -_this.CH;}_this.touchbool = false;},false);             }}window.Scroll = Scroll;var tipa = document.getElementById("tipa"),close = document.querySelector(".close"),tip = document.querySelector(".main_venue_tip"),scrollwp = document.querySelector(".main_v_tcon"),scrollCon = document.querySelector(".scroll_con"),mask = document.querySelector(".mask");var scroll = new Scroll({scrollElem : tip,scrollwp : scrollwp,scrollCon : scrollCon})tipa.addEventListener("click",function(){tip.style.display = "block";mask.style.display = "block";scroll.CH = scrollCon.offsetHeight - scrollwp.offsetHeight;},false);    }(window)

  第二种,优雅一点,当弹窗显示的时候,让根元素html的高度变成height:100%,overflow:hidden,这样确实解决了弹窗滑动底部不穿透的问题(不要给body height:100%)

  不多说,上干货

    ~function(window,undefined){    var tipa = document.getElementById("tipa"),close = document.querySelector(".close"),tip = document.querySelector(".main_venue_tip"),scrollwp = document.querySelector(".main_v_tcon"),scrollCon = document.querySelector(".scroll_con"),mask = document.querySelector(".mask"),scrollTop;tipa.addEventListener("click",function(){tip.style.display = "block";mask.style.display = "block";//弹出的时候记录值scrollTop = document.documentElement.scrollTop || document.body.scrollTop;document.documentElement.style.cssText="height:100%;overflow:hidden;position: relative;";document.querySelector(".main_bg").style.cssText = "100%;overflow:hidden"},false);    close.addEventListener("click",function(){document.body.removeAttribute("style");document.querySelector(".main_bg").removeAttribute("style");    //隐藏弹窗是,让滚动条滚动到记录的值document.documentElement.scrollTop = document.body.scrollTop = scrollTop;tip.style.display = "none";mask.style.display = "none";                    },false)}(window)

  最后要注意的是,第二种方案在手q的项目表现很差,uc,微信效果ok(andriod2.3不支持内部滚动啊注意)。

  记录遇到的点滴问题,欢迎拍砖,讨论!

  

参考资料:

  移动页面滚动穿透如何解决

转载于:https://www.cnblogs.com/pingfan1990/p/4899931.html

h5页面弹窗滚动穿透的思考相关推荐

  1. uniapp 微信小程序和H5的弹窗滚动穿透解决

    滚动穿透: 页面里的弹窗也是可以滚动的,然后页面本身内容多所以也是滚动的,就造成,在弹窗滚动的时候,页面内容也跟着滚动了.如图所示 ps: 电脑端分鼠标滚轮滚动和长按鼠标拖拽滚动,手机端只有触屏滑屏滚 ...

  2. 解决H5页面无法滚动

    问题一:  在苹果手机可以,但安卓手机不可以. H5页面没有使用任何滚动插件,比如: iscroll.min.js  或者 Better Scroll. 这里是因为: * {touch-action: ...

  3. 微信小程序弹窗滚动穿透问题

    解决点击穿透 在原生中使用el.addEventListener("touchstart", () => { console.log("ok"); }, ...

  4. 解决小程序自定义弹窗滚动穿透问题

    在小程序页面里有自定义弹窗时候,希望弹框里的scroll-view可以动,底部背景页面不要动 方法一.catchtouchmove="true" 可以实现弹框背景不滚动,但是也会导 ...

  5. 页面无法滚动_【前端词典】滚动穿透问题的解决方案

    点击上方"前端真好玩",喜欢他就关注他 听说,看恺哥的文章会上瘾 背景 产品有三宝,弹窗,浮层加引导: 设计有三宝,透明,阴影加圆角: 运营有三宝,短信,推送加红包: 程序员有一宝 ...

  6. html页面滚动导致阴影出现,三种处理滚动穿透问题方案的对比

    背景 产品有三宝,弹窗,浮层加引导: 设计有三宝,透明,阴影加圆角: 运营有三宝,短信,推送加红包: 程序员有一宝,这个做不了. 随着移动端市场的份额越大,需求就越多样化.我们今天讨论的是移动端的滚动 ...

  7. 2021-12-11 工作记录--Wechat applet-结合<van-popup>和<van-picker> 实现年份、月份下拉选择弹窗+禁止滚动穿透

    结合<van-popup>和<van-picker> 实现年份.月份下拉选择弹窗 一.实现效果 二.实现代码 1.HTML attendance.wxml <!-- 年份 ...

  8. IOS微信小程序页面滚动导致滚动穿透的解决办法

    IOS微信小程序页面滚动导致滚动穿透的解决办法 当微信小程序页面存在弹窗并且有可滚动的列表时,IOS默认的页面滚动会使弹窗滚动列表失焦,从而出现弹窗列表无法滚动的情况 第一步 第二步 当微信小程序页面 ...

  9. 跳出弹窗页面禁止滚动(PC端和手机端)

    跳出弹窗页面禁止滚动(PC端和手机端) pc端如何实现 1.当弹窗显示时,为body元素添加属性:overflow:hidden, 当关闭弹窗时移除该属性即可 2.在弹窗的div上设置 @scroll ...

最新文章

  1. 【OpenCV3】cv::Mat块访问与操作(ROI区域的选取)
  2. 使用thymeleaf中超链接失效
  3. 04_Flink-HA高可用、Standalone集群模式、Flink-Standalone集群重要参数详解、集群节点重启及扩容、启动组件、Flink on Yarn、启动命令等
  4. 如何在linux系统下对文件夹名有空格的文件
  5. hdu-1114 Piggy-Bank
  6. display:flex
  7. cv mat的shape_将ndarray转换为cv::Mat的最简单方法是什么?
  8. UI素材干货|听说UI设计师更喜欢Sketch
  9. python机器学习库sklearn——SGD梯度下降法
  10. mysql 大小写问题—20161102
  11. 关闭笔记本电脑计算机键盘,笔记本电脑关闭键盘_笔记本电脑怎么关键盘
  12. python成语接龙_python——成语接龙小游戏
  13. 开发者服务器怎么发送公众号上的消息,微信公众号发送提醒消息
  14. Python实现线性函数的拟合算法
  15. i7 8700 服务器系统,i7 8700k 云服务器
  16. 【系统架构设计师】软考高级职称,一次通过,倾尽所有,软考【系统架构设计师】论文写作方法必知必会!!!!
  17. python做波士顿房价预测
  18. Power BI时间智能
  19. 如何制作一个自己的四足机器人
  20. 51单片机键盘、矩阵键盘松手检测

热门文章

  1. 计算机网络专业的自我鉴定,计算机网络专业自我鉴定范文
  2. 单精度浮点数加法器电路设计
  3. 烽火HG680-KB-KA通刷-免拆-卡刷固件(可救砖)
  4. ibm服务器操作系统,IBM系列服务器windows操作系统安装步骤.docx
  5. rabbitMQ和对应的erlang版本匹配
  6. 运行SQL文件,出现[ERR] 1046 - No database selected
  7. 【社区分享】玩转社区开源贡献,看这篇就够了!
  8. d3 - 建立力引导图将知识图谱可视化 (一)
  9. 数据可视化D3相关记录
  10. 20191028清北学堂笔记(模拟赛#1:28日上午)