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

当浏览器界面关闭时,iOS Safari上的JS/CSS锁定滚动不起作用?

当浏览器界面关闭时,iOS Safari上的JS/CSS锁定滚动不起作用的原因是,iOS Safari在浏览器界面关闭时会自动将页面恢复到初始状态,包括滚动位置的重置。这导致之前通过JS或CSS锁定滚动的效果失效。

为了解决这个问题,可以尝试以下方法:

  1. 使用position: fixed:将要锁定滚动的元素的CSS属性设置为position: fixed,这样即使页面滚动,元素仍然会保持在固定位置。
  2. 使用overflow: hidden:将包含内容的容器元素的CSS属性设置为overflow: hidden,这样可以隐藏滚动条并禁止滚动。
  3. 使用JavaScript:可以通过JavaScript监听touchmove事件,并阻止默认的滚动行为。示例代码如下:
代码语言:txt
复制
document.addEventListener('touchmove', function(e) {
  e.preventDefault();
}, { passive: false });

这样可以阻止页面滚动,实现锁定滚动的效果。

需要注意的是,以上方法可能会影响其他功能或交互,因此在使用时需要谨慎考虑。另外,不同版本的iOS Safari可能存在差异,建议进行兼容性测试。

对于腾讯云相关产品,可以考虑使用腾讯云的移动浏览器嵌入式内核 X5 内核,它提供了更好的兼容性和性能,可以在移动端提供更好的浏览体验。详情请参考腾讯云 X5 内核产品介绍:https://cloud.tencent.com/product/x5

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

移动端那些坑

Safariiframe会自动去适应内容大小而无视CSS中设置width,该特性只能通过scrolling="no"属性关闭,并通过设置如下CSS样式设置width:width: 1px; min-width...建议结合ua-parser-js使用,因为iOS 10+其他浏览器(QQ、UC)等都还是尊敬这个东西。...使用-webkit-overflow-scrolling: touch;,同时使用::-webkit-scrollbar伪类display:none隐藏滚动条在iOS 11+出现失效情况,需要使用如下方案解决...css.sm-no-scroll {     height: 100%;     overflow: hidden; } 但由于禁掉了touchmove事件,导致iOS下你希望滚动部分也无法滚动了,因此对于希望滚动部分...,通过e.stopPropagation保留原有滚动效果,并针对回弹动画交互,建议使用如下代码声明一个可滚动区域: /* 以下属性添加到滚动容器 */ -webkit-overflow-scrolling

1.8K30

移动端web开发笔记

5、 移动端手机号码识别(IOS) 在 iOS Safari (其他浏览器和Android均不会)上会对那些看起来像是电话号码数字处理为电话链接,比如: 7位数字,形如:1234567 带括号及加号数字...不管当前有多少只手指 touchmove——手指在屏幕滑动连续触发。...双击缩放是指用手指在屏幕快速点击两次,iOS 自带 Safari 浏览器会将网页缩放至原始比例。...如果不希望开启此功能,我们可以通过input标签属性来关闭掉: 14、 禁止文本缩放 移动设备横竖屏切换,文本大小会重新计算...body元素滚动条,所以一般都借助 iScroll; Android 3.0/iOS解决了非body元素滚动问题,但滚动条不可见,同时iOS只能通过2个手指进行滚动; Android 4.0解决了滚动条不可见及增加了快速回弹滚动效果

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

    内容滚动到顶部或底部滚动事件不会继续传递给父容器。...⭐️⭐️⭐️⭐️⭐️click 点击延迟与穿透问题 现象 在 iOS 设备,单击事件可能会有 300ms 延迟,因为 Safari 浏览器需要在单击 300ms 后判断用户是否进行了第二次点击以实现双击缩放操作...是#/home,导致初始化微信 SDK 传入分享 url 和用户实际触发分享操作页面的 url 不一致,致使在 iOS 分享失败。...⭐️⭐️iOS safari 被点击元素会出现半透明灰色遮罩 解决方案 给 html 或者 body 加入以下 css 代码。...在需要锁定滚动情况下,给 document 添加 touchstart 和 touchmove 事件监听器,通过捕获触摸滑动事件,并根据情况阻止默认行为,从而避免滚动穿透。

    80320

    移动端浏览器和微信浏览器禁止body滚动

    但是很奇怪发现在移动端浏览器和微信浏览器这个不起作用,然后我分析了我写法,就是在body加了一个class去定义属性,然后改成标签定位,如body{overflow:hidden;},这个实现是可以...; position: fixed; } 这个就是完全禁止上下滑动,没有滚动条,且在iOSsafari浏览器完全不能上下滚,但是确发现微信浏览器可以上下缩动(下面再解决)。...我最后发现,上面这种解决是普遍浏览器做法,如果要更彻底一点,就直接使用js代码去控制touchmove事件,直接精致,这个在微信和手机浏览器完成可行。...参考:http://www.cnblogs.com/lbcheng/p/6044303.html 经过上面的设置,如果用户在微信浏览器不能滚动,但是跳出到了iOSsafari浏览器之后,会有很多变数...2、跳出到手机浏览器完全可以滑动。上面的思路实现:1、通过微信useragent来判断,如果是微信浏览器自动加入class去设置。2、非微信useragent就默认不加class。

    2.9K10

    【适配】425- 彻底搞懂移动Web开发中viewport与跨屏适配

    维基百科①解释为: 在计算机图形学理论中,将一些对象渲染到图像,存在两个类似区域相关概念。(视口和窗口) 视口是一个以特定于渲染设备坐标表示区域(通常为矩形)。...同理,浏览器窗口比较小,而我们想要看到页面下面的内容,我们需要向下滚动滚动条,浏览器在实现这个过程中所依赖,便是视口下移。...不过,该方案依然会有很多问题: ●对缩小版页面内细节内容浏览,依然要依靠放大和滚动,体验不好; ●如果 为 PC 设计 网页 CSS 宽度描述大于 980px,那么在移动端展示,初始页面依然会有滚动条...不做大代码调整的话,等比缩放类移动端网页,在 PC 合理展现方式应该是页面总宽度锁定在某个值,然后水平方向居中。(如下图) ?...两倍屏 1px*1px 对应是 2*2=4 个物理点; ●浏览器厂商,根据宿主设备屏幕物理像素密度,设定了一个 dpr,以便相同数量逻辑像素描述 UI 界面,在物理世界不同屏幕看起来大小都能差不多

    3K30

    彻底搞懂移动Web开发中viewport与跨屏适配

    维基百科①解释为: 在计算机图形学理论中,将一些对象渲染到图像,存在两个类似区域相关概念。(视口和窗口) 视口是一个以特定于渲染设备坐标表示区域(通常为矩形)。...同理,浏览器窗口比较小,而我们想要看到页面下面的内容,我们需要向下滚动滚动条,浏览器在实现这个过程中所依赖,便是视口下移。...不过,该方案依然会有很多问题: ●对缩小版页面内细节内容浏览,依然要依靠放大和滚动,体验不好; ●如果 为 PC 设计 网页 CSS 宽度描述大于 980px,那么在移动端展示,初始页面依然会有滚动条...不做大代码调整的话,等比缩放类移动端网页,在 PC 合理展现方式应该是页面总宽度锁定在某个值,然后水平方向居中。(如下图) ?...两倍屏 1px*1px 对应是 2*2=4 个物理点; ●浏览器厂商,根据宿主设备屏幕物理像素密度,设定了一个 dpr,以便相同数量逻辑像素描述 UI 界面,在物理世界不同屏幕看起来大小都能差不多

    3.4K20

    移动web开发需要注意二十点

    至少Apple webapp API已经说到了:我们为了让用户在safari中正常浏览网页,我们必须保证用户设备处于任何一个方位safari都能够正常显示网页内容(也就是自适应),所以我们禁止开发者阻止浏览器...12、如何关闭iOS中键盘自动大写 我们知道在iOS中,虚拟键盘弹出,默认情况下键盘是开启首字母大写功能,根据某些业务场景,可能我们需要关闭这个功能,移动版本webkit为input元素提供了autocapitalize...16、iOS中如何获取滚动值 桌面浏览器中想要获取滚动值是通过document.scrollTop和document.scrollLeft得到,但在iOS中你会发现这两个属性是未定义,为什么呢...因为在iOS中没有滚动概念,在Android中通过这两个属性可以正常获取到滚动值,那么在iOS中我们该如何获取滚动值呢?...20、如何解决iOS 4.3版本中safari对页面中5位数字自动识别和自动添加样式 新iOS系统也就是4.3版本,升级后对safari造成了一个bug:即使你添加了如下meta标签,safari

    1.9K20

    移动Web 开发中一些前端知识收集汇总

    添加初始化图片 用户点击你桌面上webapp图标后,打开会加载浏览器(实际是webkit webview模块),然后下载、解析、渲染,在这个过程中,ios允许我们使用一个初始化图片来替代白色浏览器屏幕...关闭iOS中键盘自动大写、自动更正、自动完成 在iOS中,虚拟键盘弹出,默认情况下键盘是开启首字母大写功能,根据某些业务场景,可能我们需要关闭这个功能,移动版本webkit为input元素提供了...:none;outline:none;} iOS 浏览器横屏时会重置字体大小问题 iOS 浏览器横屏时会重置字体大小,设置 text-size-adjust 为 none 可以解决ios问题,但桌面版...闪屏问题 使用css3动画尽量利用3D加速,从而使得动画变得流畅(可参考《移动Web 开发中 Off Canvas 导航》这篇文章)。..., 可用在图片加这个属性禁止下载图片*/ -webkit-overflow-scrolling: touch;/*快速滚动和回弹,模拟原生app效果*/ click 事件 iossafariclick

    3.9K50

    Hybrid App 应用 开发中 9 个必备知识点复习(WebView 调试 等)

    状态; 出现所需数据; webview1 App 首次打开,默认是并不初始化浏览器内核;只有当创建 WebView 实例时候,才会创建 WebView 基础框架。...2.2 在客户端上配置: 在调试项目中要进行测试 HTML 界面中引入 debuggap.js。... 调试项目的加载,您应用程序将会有一个蓝色地方,点击会出现一个四叶三叶草东西...参考文章:《iOSSafari调试webView/H5页面》 一般我们通过 Mac Safari浏览器 来调试,但是要注意两点: 如果调试是 APP 中 WebView 页面,则需要这个...如果调试是 H5 页面,可以直接在手机 Safari浏览器 打开直接调试。 下面开始说说在 Mac 如何调试: 1.

    3.1K00

    Hippy 常用调试方法和常见问题案例

    iOS,要注意不能使用到太新 JS 特性。...其实非常简单,Hippy 在 iOS通过自带 JavaScriptCore 运行,所以可以通过自带 Safar 进行调试,在 Safari 设置 -> 高级打开开发者菜单后 ,启动 Hippy...[Safari 调试菜单位置] 然后就可以用 Safari 开始调试了,唯一要注意,断点需要在启动后才生效,启动是断不下来,启动问题可以在关键点加上日志,日志能够正常输出。...滚动出现异常时候,可以通过 XCode 调试一下终端代码,它有个 Debug View Hierarchy 功能,可以非常直观地看到界面层级和尺寸,对调试样式问题有很大帮助。...,节点数量与 numberOfRows 一致再上屏。

    4.5K100

    中高级前端必须注意40条移动端H5坑位指南 | 网易三年实践

    提及安卓系统包括Android和基于Android开发系统 提及苹果系统包括iOS和iPadOS 本文针对开发场景是移动端浏览器,因此大部分坑位解决方案在桌面端浏览器里不一定有效 解决方案若未提及适用系统就默认在安卓系统和苹果系统都适用...2007年苹果发布首款iPhone搭载Safari为了将桌面端网站能较好地展示在移动端浏览器而使用了双击缩放。...弹窗打开后内部内容无法滚动 弹窗关闭后页面滚动位置丢失 Webview能上下滑动露出底色 打开弹窗给声明position:fixed;left:0;width:100%并动态声明top。...这种情况在Safari特别明显,简单概括就是往返页面无法刷新。 「往返缓存」指浏览器为了在页面间执行前进后退操作能拥有更流畅体验一种策略,以下简称BFCache。...当中提及了CSS方向很多坑位,这些坑位也属于一些CSS开发技巧,若喜欢CSS同学可了解笔者掘金社区首本CSS小册《玩转CSS艺术之美》做更深一步学习。

    4.3K22

    WEBAPP开发技巧总结

    使用HTML5和CSS3l做UI,若还是遵循着一般web开发中使用HTML4和CSS2那样开发方式 话,这也就失去了WEBAPP本质意义了,且有些效果也无法实现,所以在此又回到了我们主题–...至少Apple webapp API已经说到了:我们为了让用户在safari中正常浏览网页,我们必须保证用户设备处于任何一个方位 safari都能够正常显示网页内容(也就是自适应),所以我们禁止开发者阻止浏览器...12、如何关闭iOS中键盘自动大写 我们知道在iOS中,虚拟键盘弹出,默认情况下键盘是开启首字母大写功能,根据某些业务场景,可能我们需要关闭这个功能,移动版本webkit为 input元素提供了...16、iOS中如何获取滚动值 桌面浏览器中想要获取滚动值是通过document.scrollTop和document.scrollLeft得到,但在iOS中你会发现这两 个属性是未定义,为什么呢...因为在iOS中没有滚动概念,在Android中通过这两个属性可以正常获取到滚动值,那么在iOS中我们该如何获 取滚动值呢?

    2K20

    移动端开发中遇到坑点及总结(持续更新)

    有新坑点会总结进来) 一、new Date()在IOS出现值为NAN问题 我们常用new Date()去获取时间戳,例如 new Date("2017-08-11 12:00:00"); 但在IOS...原因:这是IOS采用Safari浏览器内核原因,会在数字串加上a标签,并且在a标签里添加属性值tel 解决办法:在head里面添加如下mate标签就可以了。...#root(jq写法) // 弹窗show: $('#root').css('overflow','hidden') // 弹窗hide: $('#root').css('overflow','...auto') 这个方法可以解决,但不适用于部分情况,当我们往下滑动再触发显示弹窗,我们关闭弹窗后会发现,页面突然跳到了最顶部,这是不太友好地方。...元素,加上这样css属性 cursor: pointer **解决办法二:**将document换成绑定元素父元素 $(selector父元素).on('click','selector',function

    99330

    UIWebView 浏览器控件一、初始化与三种加载方式二、常用属性和方法三、代理方法 UIWebViewDelegate四、其它案例:

    之后才有的,通过他们可以设置更加有趣web体验 14.这个属性用来设置一种模式,网页大小超出view,将网页以翻页效果展示 @property (nonatomic) UIWebPaginationMode...stringByEvaluatingJavaScriptFromString:js];} 补充:用JS删除,浏览器console中调试 (1)按标签名删除 (2)按类删除 4.加载失败时调用方法...这时需要使用一些CSS样式来达到这些效果,这些CSS只适用于IOSSafari。 - -webkit-touch-callout 禁用长按触控对象弹出菜单。...IOS中,当你长按一个触控对象,如链接,safari会弹出包含链接信息菜单。...IOS中,在页面元素中进行长按操作,safari会弹出菜单,来允许进行选择行为。

    1.5K60

    移动端H5页面开发坑点指南

    ('music').play(); }, false); 小结: 1.audio元素autoplay属性在IOS及Android无法使用,在PC端正常 2.audio元素没有设置controls,...} html5碰到上下拉动滚动卡顿/慢怎么解决 首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题。...这种情况是以前遇到,这里也说下;主要会发生在webview里多一点,点击后退页面以缓存形式出现,而不是刷新后,很多情况下这不是你预期效果,解决方法是用js: 方法1: window.addEventListener...:纠错 关于iOS与OS X端字体优化(横竖屏会出现字体加粗不一致等)问题 iOS浏览器横屏时会重置字体大小,设置text-size-adjust为none可以解决iOS问题,但桌面版Safari...00:00,也就是说ios默认就是从0开始计算,我们不需要设置后面的时分秒为00:00:00 iOS(safari)标签绑定点击事件无效 iOS(safari)有时候某个标签绑定点击事件无效,加上空

    3.1K10

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

    Safari (其他浏览器和 Android 均不会)上会对那些看起来像是电话号码数字处理为电话链接,比如: 7 位数字,形如:1234567 带括号及加号数字,形如:(+86)123456789...(Boolean)方法用来将不在浏览器窗口可见区域内元素滚动浏览器窗口可见区域。...如果该元素已经在浏览器窗口可见区域内,则不会发生滚动。 true,则元素将在其所在滚动可视区域中居中对齐。 false,则元素将与其所在滚动可视区域最近边缘对齐。...keyup 事件 IOS12 输入框难以点击获取焦点,弹不出软键盘 定位找到问题是 fastclick.jsIOS12 兼容性,可在 fastclick.js 源码或者 main.js 做以下修改...下 fixed 失效原因 软键盘唤起后,页面的 fixed 元素将失效,变成了 absolute,所以页面超过一屏且滚动,失效 fixed 元素就会跟随滚动了。

    4.2K20
    领券