禁止IOS 上的web应用全屏显示滚动

最新推荐文章于 2020-12-24 23:15:11 发布
最新推荐文章于 2020-12-24 23:15:11 发布
阅读量432 收藏
点赞数
分类专栏： Web App 文章标签： Web App IOS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/a15140288018/article/details/84385279
版权
本文将介绍一种通过JavaScript实现的技术，用于在使用iPad和iPhone设备浏览网页时，禁止全屏显示时页面无法滚动的情况。通过监听touchmove事件并判断页面是否已经完全加载，我们可以阻止页面在全屏模式下滚动，从而提供更好的用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

if(ua.match(/ipad/i)=="ipad" || ua.match(/iphone/i)=="iphone"){
            //禁止web应用全屏显示时页面可以滚动
            document.ontouchmove = function(e){
                if (document.body.scrollHeight == document.body.clientHeight){
                    event.preventDefault();
                }
            } 
}  

上一篇的后续。。。规避ios全局overscroll的坑
weixin_36094484的博客
07-09 1123
所以就说自己太naive 今天闲地蛋疼着看了下csdn的手机端和一些网站如携程的，发现不少站点都已经在顶部栏用了fixed，但是不会出现overscroll(俗称橡皮筋效果或出界)的情况。 上图就出现了恶心的情况，页面下拉的时候，原本fixed上去的topbar被背景色覆盖了。 但是人家csdn和携程是这样的： solution: 一时好奇研究下，发现原来他们将页面高度限制在客户...
APP软件介绍页面全屏滚动展示特效
08-29
3. 适应性设计：考虑到不同设备的屏幕尺寸和方向，全屏滚动特效应具备良好的响应式布局，保证在各种设备上都能良好显示。 4. 可访问性：遵循无障碍设计原则，确保视觉障碍用户也能通过辅助技术如屏幕阅读器来理解和...
禁止web页面在ios中整屏上下弹动
gary的博客
04-26 3630
禁止body或者可滑动元素的 touchmove 事件 例: vue this.$nextTick(() => { // 通过refs拿到dom元素, 给dom元素绑定touchmove事件, 其内容做操作 this.$refs.dom.addEventListener('touchmove', function (e) { if (!e.isSCROLL) { e.pr...
Web APP 阻止 IOS触摸滚动
码农高端会所
09-06 2423
http://blog.youkuaiyun.com/EI__Nino/article/details/8857314
禁止ios浏览器页面上下滚动 (橡皮筋效果)弹性滚动 微信的下拉回弹
細水、長流√的专栏
05-27 2万+
发现之前阻止页面滚动的代码e.preventDefault代码失效了。于是自己折腾了一番，找到了解决办法。 一、前言 浏览器在移动端有一个默认触摸滚动的效果，让我们感触最深的莫过于微信浏览器里面，下拉时自带橡皮筋的效果。 然而在开发的时候我们经常需要阻止此效果。 在此先直接给一个方案，直接加上下面的代码即可： document.body.addEventListener('tou...
IOS 通过界面图标启动Web应用 + 全屏应用 + 添加到主屏幕
dicha7140的博客
01-10 822
请注意！！！使用了【全屏模式之后】。页面的顶部会空出一大块。而且这并不属于margin,padding，或者定位。就是单纯的空出来非常难调试。其实坑就是这里 在 iPhone「添加到主屏幕」时显示自定义图标 测试资源下载：https://github.com/dragon8github/mobile-boilerplate/tree/master/img/touch &l...
FSMirror：快速实现iOS原型镜像的全屏Web视图应用程序
在描述中提到的“无弹跳的全屏 Web 视图”意味着 FSMirror 支持全屏模式下查看内容，并且不会出现传统移动浏览器在用户滚动时出现的弹性效果。这样的设计使得原型展示更加贴近于最终的应用体验，帮助开发者或设计师...
全屏切换与滚动美化：jQuery仿IOS滚动插件Nicescroll3
该插件不仅可以实现全屏滚动的效果，还可以对滚动条进行高度的定制和美化，这使得开发者能够创造出既美观又实用的滚动体验。Nicescroll3支持的特性包括但不限于：自定义滚动条样式、动态改变滚动条的外观、支持触摸...
jQuery仿IOS滚动插件Nicescroll3.zip
07-04
然后，通过在页面元素上应用特定的jQuery选择器和Nicescroll3的初始化方法，即可激活滚动效果。例如： ```javascript $(document).ready(function() { $("html").niceScroll({ cursorcolor: "#00F", // 滚动条...
打造仿IOS风格网页——jquery.nicescroll滚动条美化插件
例如，确保只在需要滚动的元素上应用滚动效果，避免在小的滚动区域上使用复杂的动画效果，这些都可能影响到页面的加载速度和交互响应性。 **9. jquery.nicescroll插件的更新与维护** 由于web技术和浏览器标准持续...
禁止ios浏览器页面上下滚动 (橡皮筋效果)
热门推荐
qq_40717869的博客
08-16 2万+
在ios任何版本的浏览器（包括ios微信内置的浏览器），滚动页面的时候会出现整个页面上下滚动的效果（百度说是橡皮筋效果），虽然不耽误使用，但是让人心烦，所以要禁止掉这个行为。 有两种方法可以解决这个问题：（推荐使用第二种方法） 1.用fixed定位来解决 解决思路：这个就是把html,body设置width: 100%; height: 100%; position: fixed;top:0...
webApp中防止页面出现上下滑动的方法
Firoly的博客
02-05 7183
webApp中页面的禁止滑动
禁用ios浏览器页面上下滚动回弹效果
zhh123sy001的专栏
01-22 1万+
网上找了各种方案测试都有各种问题，最后整理一个完整亲测有效的方案分享出来 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-wi
js禁止苹果页面底部滚动_web页面弹出遮罩层,通过js或css禁止蒙层底部页面跟随滚动...
weixin_39849239的博客
12-24 465
场景概述弹窗是一种常见的交互方式，而蒙层是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为。那么，如何阻止呢？请看以下分析：方案分析方案一打开蒙层时，给body添加样式：overflow: hidden;height: 100%;在某些机型下，你可能还...
iOS 实现webview不滚动，显示所有内容
WangQingLei0307的博客
03-09 8928
self.first_webview 为：web view height1 为:web view内容高度 self.scrollSuperView 为:滚动式图scrollview 1. 首先我们要在底部放一个scrollview，在上面放置一个webview，接下来便是禁止webview滚动。 2. 实现web view不滚动 UIScrollView *first_tempV...
阻止IOS上的弹性滚动
weixin_30898109的博客
04-26 715
1、添加判断标识 2、添加事件监听addEventListener var flag = false; // 判断标识 document.elementName.addEventListener("touchmove", function(e){ if(flag){ 　　e.preventDefault(); 　　e.stopPropagation(); ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值