可能我们经常做这样的弹窗对吧,兴许我们绝对很简单,两下搞定:
弹窗的页面结构代码:
<!-- 弹窗模块 引用时移除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不支持内部滚动啊注意)。
记录遇到的点滴问题,欢迎拍砖,讨论!
参考资料: