首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

禁止遮罩下页面滑动

最近在业务中遇见一个问题,就是弹出一个蒙版,覆盖整个页面,有一部分内容固定在底部。可是底部内容还是能滑动。 我相信在蛮多场景下是需要做到蒙版的时候底部禁止滑动。尤其是手机端。...')[0]; content.addEventListener('touchmove', function (e) { e.preventDefault(); }, false) 这两个都是禁止...touch事件,在移动端有效,在PC端用滚轮滑动禁止不了。...还有要注意,新版chrome在PC模式下可以,手机模式下会报错,要声明阻止滑动不是被动的: var content = document.getElementsByTagName('body')[0];...在这边要分享一件事,就是在微信下,当你滑动的时候,透过遮罩触发了body,那么微信默认进行一个进程一样,得等一下才能滑动遮罩上面的元素。暂时没有优化的方法,当然,遮罩没有透明度不会出现。 (完)

2.1K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JS页面生命周期事件

    今天做个大屏项目, 想在大屏加载所有资源前加个加载动画, 加载结束再移除, 当然肯定时在load事件里进行移除, 但是对其他的事件有点模糊了, 复习一下哦垃圾 生命周期事件 DOMContentLoaded...DOMContentLoaded DOMContentLoaded 事件发生在 document 对象上, 必须使用document对象上 2. window.onload 当包括样式、图像和其他资源的页面被全部加载时...,window 对象上的 load 事件就会被触发 3. window.onunload 当访问者离开页面时,window 对象上的 unload 事件就会被触发。...我们可以在那里做一些不涉及延迟的事件,比如关闭相关的弹出窗口 可以在用户离开时, 使用unload事件发送我们想要保存在服务器上的数据 参考https://w3c.github.io/beacon/,...当 sendBeacon 请求完成的时候,浏览器可能已经离开了文档,所以就没办法获取服务器的响应数据 4. window.onbeforeunload 如果访问中触发了离开页面的导航或试图关闭窗口,beforeunload

    3.3K30

    JS 模拟手机页面文件的下拉刷新

    js 模拟手机页面文件的下拉刷新初探 老总说需要这个功能,好吧那就看看相关的东西呗 最后弄出了一个简单的下拉刷新页面的形式,还不算太复杂 查看 demo 要在仿真器下才能看到效果,比如chrome的里边...(或者用手机浏览器查看,但测试发现有些浏览器有问题,目前手机猎豹是没问题的) ?...item6 item7 -- item7 -- item7 js...部分: 主要就是 为一个节点绑定事件,可以是整个body,按照实际来看 k_touch()函数是主要代码,目前主要涉及三个事件,touchstart  touchmove  touchend 这里获取touch...slideDown2.style.display = "none"; } //下滑刷新调用 k_touch("content","y"); //contentId表示对其进行事件绑定

    13.9K10

    vue 界面在苹果手机滑动点击事件等卡顿解决方案

    用vue编写项目接近尾声,需要集成到移动端中,在webstorm上界面,运行效果都很完美,但是在苹果手机上各种问题都出现了,原生项目一向滑动流畅,事件响应迅速,可是苹果手机打开这个项目有两个问题,(1)....滑动页面卡顿,(2).点击事件响应缓慢,百度才发现在苹果手机上有300ms的延迟。...一.滑动页面卡顿 //页面布局 页面内容 在对应的组件的最外层div上加上这样的样式....点击事件响应缓慢 (1).安装fastclick (npm install fastclick -S) (2).在main.js中设置方法 import FastClick from 'fastclick...' FastClick.attach(document.body); 在引入fastclick之后,虽然页面事件快了很多,但是会有一个副作用:input输入框需要连续点击两次或者长按才能获取焦点,真是到处是坑啊

    1.8K30

    收藏 | 移动端H5开发常用技巧总结

    禁止长按菜单,禁止收拾,标准排版,以及强制图片显示。...ios 手机上下滑动页面会产生卡顿,手指离开页面页面立即停止运动。...整体表现就是滑动不流畅,没有滑动惯性。iOS 5.0 以及之后的版本,滑动有定义有两个值 auto 和 touch,默认值为 auto。...解决方案: fastclick可以解决在手机上点击事件的300ms延迟 zepto的touch模块,tap事件也是为了解决在click的延迟问题 触摸事件的响应顺序 ontouchstart ontouchmove...keyup、keydown、等支持不是很好, 用 input 监听键盘 keyup 事件,在安卓手机浏览器中没有问题,但是在 ios 手机浏览器中用输入法输入之后,并未立刻相应 keyup 事件 IOS12

    4.2K20

    移动web开发问题和优化小结

    如何让我们所开发的手机页面能有更好的交互体验,就是这篇文章的主旨:移动web开发问题和优化小结。...大家可以按照开发需求,参考下面的连接进行限制--ios10中禁止用户缩放页面) <meta content="width=device-width, initial-scale=1.0, maximum-scale...2.动画和过渡能用css3解决的,就不要使用<em>js</em>。如果是复杂的动画可以使用css3+<em>js</em>(或者html5+css3+<em>js</em>)配合开发,效果只有想不到,没有做不到。...或者封装tap<em>事件</em>来代替click <em>事件</em>,所谓的tap<em>事件</em>由touchstart<em>事件</em>+ touchmove(判断是否是<em>滑动</em><em>事件</em>)+touchend<em>事件</em>封装组成。...,避免<em>页面</em>跟着<em>滑动</em> 这个细节是我在基于vue开发焦点图的时候遇到的,后来自己找不到方法,直接在sf上提问了,大家可以去参考下:移动端轮播图,上下<em>滑动</em>的时候不触发<em>页面</em>的滚动 ps:<em>滑动</em>我没有使用什么库,是我根据

    2.1K21

    滚动穿透的6种解决方案【已自测】

    关键代码: JS控制弹窗的交互、body的禁止滚动 ? css添加弹层的超出滚动效果 ? 局限问题: 弹层中内容滚动到顶部或底部后,还会连带页面body一起滚动。也就是还会发生穿透效果。...因此还需要我们对弹层的可滚动区域的滑动事件做监听: 第一种情况,若向上滑动时,到达底部;或者第二种情况,若向下滑动时,已到顶部。 这两种情况任意一种发生时,就阻止滑动事件。 这段逻辑代码如下: ?...关键代码: js控制弹窗的交互、弹窗的禁止滚动 ? 局限问题: 因为touchmove被禁掉了,就会造成弹窗内部所有位置都不能响应touchmove事件,效果上就是弹窗内部不能再滚动了。...解决方案与思路: 具体制作思路写在js注释上。 1、交互代码 ? 2、禁掉弹窗的touchmove 的默认事件 ? 3、重写手势滑动效果 ?...局限问题: 这个方法我在真机上测试时发现一个问题,是IOS的: 大家应该都知道IOS的页面顶部继续下拉或者底部继续上拉,都会出现页面后边的背景,这个在手机上很常见。

    13.6K31

    移动端开发总结

    如何让我们所开发的手机页面能有更好的交互体验,就是这篇文章的主旨:移动web开发问题和优化小结。...大家可以按照开发需求,参考下面的连接进行限制–ios10中禁止用户缩放页面) <meta content="width=device-width, initial-scale=1.0, maximum-scale...2.动画和过渡能用css3解决的,就不要使用<em>js</em>。如果是复杂的动画可以使用css3+<em>js</em>(或者html5+css3+<em>js</em>)配合开发,效果只有想不到,没有做不到。...或者封装tap<em>事件</em>来代替click <em>事件</em>,所谓的tap<em>事件</em>由touchstart<em>事件</em>+ touchmove(判断是否是<em>滑动</em><em>事件</em>)+touchend<em>事件</em>封装组成。...,避免<em>页面</em>跟着<em>滑动</em> 这个细节是我在基于vue开发焦点图的时候遇到的,后来自己找不到方法,直接在sf上提问了,大家可以去参考下:移动端轮播图,上下<em>滑动</em>的时候不触发<em>页面</em>的滚动 ps:<em>滑动</em>我没有使用什么库,是我根据

    2.6K10

    📚一站式解决:H5开发全攻略,看这篇让你省时又省力

    screen_name=OpenAI">Open Twitter ⭐️⭐️禁止页面缩放和缓存: 禁止页面缩放和缓存 <meta name="viewport" content="width=device-width...cursor: pointer; ⭐️⭐️⭐️<em>手机</em>底部刘海存在背景,和<em>页面</em>背景色不一致 解决方案 通过指定 body 的背景色来解决。...() { enableScroll(); } ant-mobile组件库解决方式 思想思路: 针对触摸<em>滑动</em><em>事件</em> touchmove,通过监听<em>滑动</em>方向和滚动元素的状态,决定是否阻止默认的<em>滑动</em>行为,从而防止滚动穿透...在需要锁定滚动的情况下,给 document 添加 touchstart 和 touchmove <em>事件</em>的监听器,通过捕获触摸<em>滑动</em><em>事件</em>,并根据情况阻止默认行为,从而避免滚动穿透。...在解锁滚动时,从 document 移除对触摸<em>事件</em>的监听器,恢复默认的<em>滑动</em>行为。

    59520

    移动端页面手机屏幕分辨率自动缩放的js

    ,当拿到设计图的时候,图基本都是按物理分辨率来设计的,一般常用的为640(iphone5/5s)、750(iphone6/6s),而谷歌等浏览器采用小手机模式浏览页面的时候,上面的值为逻辑分辨率,调试的时候很难把控页面样式...,在手机端的样式也会因此大乱,在页面头部加入以上一段js之后,在手机端就可以正常显示了, var phoneScale = phoneWidth/750; 除以的为设计图设计的页面宽度,750是按iphone6...来设计(根据自己使用需求来修改),即让页面的 放大比率=屏幕的逻辑分辨率/物理分辨率,从而达到适应手机的效果。...(注意,有时候页面加了这段代码在调试的时候,切记刷新,刷新过后就会按手机缩放比例显示) 概念解析: phys.width:一般我们所指的宽度width即为phys.width,物理宽度(物理分辨率) device-width...; opera:850px; Andriod webkit:800px; IE:974px; 然后会把这个980px虚拟窗口装进宽度为750px的iphone6中,当然这样的话必须缩放,这就是为什么在手机中展现电脑端页面没有出现横向滚动条

    5.4K80

    jimojianghu

    触控板 要禁止触控板的缩放行为,需要处理鼠标滚轮事件:wheel 。 因为笔记本触摸板双指滑动,将响应该事件,如果对该事件阻止默认行为,就能解决缩放问题了。...) { // event.stopPropagation() // }) 触摸屏 要禁止触摸屏的手指缩放,可以使用如下的 CSS 和 JS 两种方法。...css 处理 只要在页面上使用css样式 touch-action: none,就能禁止web在手机或平板上的缩放了。...js 处理 使用js代码来禁止触摸屏的手指缩放,和处理触控板类似的,这里主要是监听几个手势事件,touchstart, touchend, touchmove等。...笔记本触摸板双指滑动,将响应滚轮事件,因此可以监听该事件禁止触摸板手指缩放界面。 但需要注意滚轮默认事件,如会导致子元素滚动失效,这时候就要在子元素上阻止相同事件冒泡。

    3.8K00

    前端工程师用Node.js + Appium实现APP自动化

    OPPO开发者选项中需要需要开启禁止权限监控,否则无法自动安装App,其他同事出现了App总是重复安装的问题。...图片自动化开发如果通过adb连接手机,并通过 appium inspector 成功获取到界面元素,那么恭喜你已经完成了80%的进展,剩下的就是通过Node.js + webdriver.io 开发自动化脚本...滑动页面保存图片webdriver.io 的选择器和jquery的语法很类似,看一个Demo相信你就掌握了。...工具:adb连手机看参数、 Appium命令行启动服务、appium-inspector查看页面元素。流程:使用Node+ webdriverio,实现操作设备。...语法:webdriverio 元素选择、模拟点击、滑动,获取元素属性 + 图片。采坑:不同手机的开发者选项设置。启动参数务必加noReset。滑动事件务必加wait参数。

    94920

    JS魔法堂:定义页面的Dispose方法——unload事件启示录

    (unload事件的Cancelable属性值为No)  那么反过来看看beforeunload事件,这时页面状态大致与平常一致: 页面所有资源均未释放,且页面可视区域效果没有变化; UI人机交互失效(...的JS异常,而firefox下则连异常都懒得报。  既然不给用window.confirm,那么如何弹出二次确定对话框呢?其实beforeunload事件已经为我们准备好了。...但请记住一点:由于[before]unload事件会降低页面性能,因此仅由于需要做重要的善后或不可逆的清理工作时才监听这两个事件。  ...以前,当我们从页面A跳转到页面B时,页面A的所有资源将被释放(销毁DOM对象,回收JS对象, 释放解码后的Image资源等);后来各大浏览器厂商分别采用bfcache/page cache/fast history...bfcache恢复而来的,所以JS对象均未回收,因此window.test值依然有效。

    2.3K90
    领券