发页面上某个元素或者达到某个条件时,页面弹出模态框的场景应该是很常见的了,特别是在屏幕较小的移动端,例如下面这种: 对于这个效果,之前一直都没怎么在意探究过,因为觉得应该没什么好弄的,直到,我接到了一个包含此效果的需求之后,我才知道什么叫眼高手低,还是太年轻。 body ...
HTML CSS JS 所以为了禁止弹出层下内容的滚动,必须要禁止滑动事件传递到下一层,所以要防止滑动事件冒泡 当弹出层出现的时候 所以最后的JS应该是 ...
2018-10-12 15:34 0 2195 推荐指数:
发页面上某个元素或者达到某个条件时,页面弹出模态框的场景应该是很常见的了,特别是在屏幕较小的移动端,例如下面这种: 对于这个效果,之前一直都没怎么在意探究过,因为觉得应该没什么好弄的,直到,我接到了一个包含此效果的需求之后,我才知道什么叫眼高手低,还是太年轻。 body ...
如标题所示,这里受 https://segmentfault.com/a/1190000003849952 这篇文章的启发,自己重写了一下代码 效果图: 代码: ...
PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果。 也就是说给body添加overflow:hidden属性即可,IE6、7下不会生效,需要给html增加overflow:hidden属性。 要制作这个效果在PC端非常简单,只需要设置 ...
在遮罩层添加 (前提使用vue)@touchmove.prevent HTML: ...
原理就是利用 overflow:hidden; ...
如果你是将overflow:hidden用在了body上那么不管用,因为移动端是基于touch事件。 两种解决方法: 1、为html和body同时设置height:100%;overflow:hidden; html, body{ height:100 ...
可能是子元素没有撑开父元素 用better-scroll的话可能在元素还没有生成的时候,new BScroll(el) 没有找到目标节点 如果pc可以移动端不可以那就试试监听滚动内容区的touchmove事件并阻止事件冒泡 ...
...