web浏览器中,当我们出现一个浮层,浮层里面也有滚动条的时候,且有部分背景半透明的时候,就会发现,当我们滚动浮层里面的小滚动条的时候,背后整个页面都跟着一起滚走了。
方案1:监听浮层的touchstart,touchmove事件, 计算浮层滚动区域的最大滚动区域,在touchmove事件中判断规则,根据情况阻止默认事件(popup_box_scroll为浮层滚动区域的id)
依赖方法:
let isMy = function(node, id){ return node.getAttribute('id') === id; },isMyOrParents = function(node, id){ if(isMy(node, id)){ return true; }else{ let t = node.parentNode; while(t && !/body/i.test(t.tagName)){ if(isMy(t, id)){ return true; } t = t.parentNode; } return false; } }, ppbData = { isTarget: false, posY: 0, scrollY: 0, maxscroll: 0 }
给弹出层(id=popup_box)绑定touchstart,touchmove,touchend事件,事件方法如下:
ppbTouchStart: function(e){ let event = e.touches[0] || e; ppbData.isTarget = isMyOrParents(event.target, 'popup_box_scroll'); // 当前滚动元素标记 ppbData.elScroll = ppbData.isTarget ? document.getElementById('popup_box_scroll') : null; if(!ppbData.elScroll){ return; } // 垂直位置标记 ppbData.posY = event.pageY; // 现在移动的垂直位置,用来判断是往上移动还是往下 ppbData.scrollY = ppbData.elScroll.scrollTop || ppbData.elScroll.pageYOffset || 0; // 是否可以滚动 ppbData.maxscroll = ppbData.elScroll.scrollHeight - ppbData.elScroll.clientHeight; }, ppbTouchMove: function(e){ let event = e.touches[0] || e; // 如果不足于滚动,则禁止触发整个窗体元素的滚动 if (ppbData.maxscroll <= 0) { // 禁止滚动 e.preventDefault(); } if(!ppbData.elScroll){ e.preventDefault(); return; } // 移动距离 let distanceY = event.pageY - ppbData.posY; // 上边缘检测 if (distanceY > 0 && ppbData.scrollY == 0) { // 往上滑,并且到头 // 禁止滚动的默认行为 e.preventDefault(); } // 下边缘检测 if (distanceY < 0 && (ppbData.scrollY + 1 >= ppbData.maxscroll)) { // 往下滑,并且到头 // 禁止滚动的默认行为 e.preventDefault(); } }, ppbTouchEnd: function(e){ ppbData.isTarget = false; ppbData.maxscroll = 0; }
方案2:
给html, body节点设置height=弹出层的高度(弹出层的高度在显示时获取,作防重处理),overflow=hidden样式。
相关推荐
在不使用scroll-view的弹窗中, 为position为absolute或fixed的元素设置catchtouchmove空事件就可以阻止弹窗下的页面因事件穿透滚动 <view catchtouchmove=doNothing></view> 也可直接写catchtouchmove,相当于绑定...
解决移动端fixed遮罩弹窗滚动击穿的vue指令
这是一款基于jQuery兼容电脑手机端轻量级弹层组件代码,alert.js弹出层插件。 [removed][removed] [removed][removed] [removed][removed] [removed][removed] [removed][removed] 'style' : 'wap',...
jQuery Dialog弹出层对话框插件演示,简单的那种,看上去比较不错,下面说一下用法: 基本操作 默认的 new Dialog(‘这是一个默认对话框‘).show(); 非模态对话框 new Dialog(‘非模态对话框,可以打开多个.,{modal...
在网上找的比较不错的弹出层。 实例有: 可以打开多个; 自动关闭; 非fixed模式(对话框不随滚动条移动); 显示指定ID的内容; 加载一张图片; 加载一URL地址; 加载一URL到iframe; 回调函数。
主要介绍了详解iOS中position:fixed吸底时的滑动出现抖动的解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
html页面头部,底部固定,中间内容超过1屏时,页面自动显示滚动条
本文实例讲述了vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法。...而且这种做法,会让你更加难以判断是否滑动到底部了,特别是当你并不是整页滚动,而是页面中拥有一个fixed固定的头部时。 在.vue的组件
NULL 博文链接:https://onestopweb.iteye.com/blog/2339092
js代码 [removed][removed] [removed][removed] [removed][removed] ...'position' : 'fixed', //定位方式 ...'modal' : false, //是否...这是一款基于jQuery兼容电脑手机端轻量级弹层组件代码,alert.js弹出层插件。
js代码 [removed][removed] [removed][removed] [removed][removed] ...'position' : 'fixed', //定位方式 ...'modal' : false, //... 这是一款基于jQuery兼容电脑手机端轻量级弹层组件代码,alert.js弹出层插件。
使用CSS样式”position:fixed”... 本文的实现方式是使用js来控制div块随滚动条水平滚动,原理就是当window对象发生scroll事件和resize事件使,更新div块的left或right的值,使其相对浏览器左边或右边的位置实时改变。d
position:fixed;实现底层页面不跟随浮层模块滚动
要弹出层,先要用一个遮罩层挡在下面的页面,此遮罩层是全屏的,页面滚动也要有,所以设置 position: fixed;还要有透明效果,下面是我定义的遮罩层css,取名mask 代码如下: .mask { position: fixed; width: ...
基于jquery的滚动固定位置广告位插件,支持自定义偏移量。...支持div层滚动至页脚处时,停止滚动。 具体看代码注释, 非IE6采用position="fixed" IE6采用JS方式控制滚动(CSS表达式方式会有资源损耗过大性能问题)
内容索引:脚本资源,Ajax/JavaScript,弹出层,Ajax 一个Ajax弹出层实例,使元素fixed定位
在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:[removed]。当onscroll事件发生时,用js获得页面的scrollTop值,判断scrollTop为一个设定值时,显示“返回面部” js网页滚动条滚动事件 <...
起始这个组件,完全可以自己利用javascript的滚动事件[removed]与position:fixed手写。IE6的兼容性问题主要出现在position:fixed上面,如何解决已经在《【CSS】IE6中的position:fixed问题与随滚动条滚动的效果》...
在蒙层弹起的时候将body设置为fixed定位 在蒙层消失的时候将body恢复原位 popupVisible(newValue) { if (newValue) { document.body.style.position = 'fixed'; document.body.style.width = '100%'; document....
> 蒙层穿透就是,当你用fixed 布局让蒙层显示的时候, 手指滑动屏幕会出现底部内容也滑动的现象. 如图: 当蒙层出现的时候,你滚动屏幕,底部内容也一起跟着滚动。 这就是蒙层穿透, 也可以叫 ‘滚动穿透’. 当然...