h5页面ios，双击向上滑动，拖拽到底部还能继续拖拽

最新推荐文章于 2023-03-13 09:56:43 发布

aamen1109

最新推荐文章于 2023-03-13 09:56:43 发布

阅读量6.2k

点赞数 1

分类专栏： js 文章标签：手机

本文链接：https://blog.csdn.net/aamen1109/article/details/50625162

版权

在iOS环境下，H5页面存在双击屏幕导致滚动条上移以及拖拽到底部仍能继续拖动的问题。本文提供解决方案，通过JS判断系统并处理，阻止双击上滑及底部过度拖拽，同时注意区分安卓系统，避免影响原生滚动行为。

摘要由CSDN通过智能技术生成

在ios下，双击屏幕某些地方，滚动条会自动向上走一段。

当用微信看h5的时候，拖拽到底部，会漏出来，微信自带下面的灰黑色皮肤。

用js解决一下吧，这俩问题很类似，总结到一起了。

----------特别注意，安卓没有发生过这些情况，因为解决办法是给最外层的wrapper，overflow-y:auto;也就是放弃了原生的滚动条，所以解决的时候要判断一下系统，安卓就不用处理了。

html部分：----------------------------

<body>

<section>内容部分aaaa111</section>

<section>内容部分aaaa222</section>

<section>内容部分aaaa333</section>

</div>

</body>

css部分：--------------------------

.wrapper2{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow-y:auto;
-webkit-overflow-scrolling : touch;
}

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

aamen1109

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

H5项目中有滚动元素，ios系统拖动默认行为和滚动事件冲突解决

donggua_123的博客

05-04

6050

问题：h5页面，在ios系统中，拖动顶部固定元素（红色区域）时，会默认拖动整个浏览器，导致出现白色背景，影响到自定义的滚动事件（橙色区域），因为自定义滚动是用了ui框架的，会导致其短暂的无法滚动，必须要等整个页面停稳了才能滚动橙色区域，影响到体验。这应该是ios系统自带的缓动效果，当用户拖动页面元素时给了一个回弹吸顶的效果，显得更加柔和，但有时候我们是不需要的。想要的效果：到顶后继续向下滑...

关于移动端h5页面不能滑动问题的解决办法

weixin_43066287的博客

05-19

7660

关于移动端h5页面不能滑动问题的解决办法1. 先说css，主要排查 overflow:hidden；2. 再说下js，主要是有在touchstart、touchmove或touchend等事件中的阻止默认事件的原因 1. 先说css，主要排查 overflow:hidden；检查也有一定的顺序，检查超出高度的标签是否用了overflow:hidden；最好先检查html或body是不是加了height:100%；overflow:hidden；然后再看包裹在最外边的元素是否加了overflow:hidde

1 条评论您还未登录，请先登录后发表或查看评论

ios上整体页面可拖动问题

浮游的博客

03-13

1715

在排查问题时，按网上建议，在根元素html和body上加overflow:hidden，虽然在浏览器上无法滑动，但是到了移动端还是可以左右滑动，然后一层层排查，直到在使用了transform:rotate属性的元素父级(最近的position不为static的父级)加上overflow:hidden，才解决了问题。在ios系统中发现，当touch位置在比较偏上或者偏下的情况下，手指拖动整个页面，会导致整个页面整体被拖动，然后内容页的滚动部分会发生卡顿，不能滑动的问题。

uni-app适配ios底部黑色条

L_C_sunny的博客

02-20

424

【代码】uni-app适配ios底部黑色条。

Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码

10-19

在JavaScript中，H5页面的上下滑动方向判断以及检测是否滑动到顶部或底部是移动设备上常见的交互需求。这些功能可以用于实现如导航栏的自动隐藏和显示、滚动到底部加载更多数据等效果。下面将详细介绍如何使用...

混合开发-h5页面与ios、安卓之间的通信（H5篇）

01-20

混合开发-h5页面与ios、安卓之间的通信（H5篇） WebView(网络视图)能加载显示网页，可以将其视为一个浏览器。它使用了WebKit渲染引擎加载显示网页首先你需要判断是哪端使用navigator.userAgent获取浏览器属性下面...

详解h5页面在不同ios设备上的问题总结

12-13

本文主要总结了在不同iOS设备上，特别是嵌入到小程序Webview中的H5页面所遇到的一些典型问题及其解决方案。 1. **日期问题**：当日期格式为"yyyy-mm-dd hh:mm:ss"时，iOS系统可能无法正确识别和解析。例如，尝试...

移动端页面上下滑动时禁止显示底部黑色

03-29

页面布局 <body id="wrapper"> <div id="container"></div> </body> 引用组件引用组件支持下面两种方式： clone之后直接拷贝引用bin文件夹下面的preventoverscroll.min.js 从npm下载安装 npm install --save preventoverscrolljs var PreventOverScroll = require('preventoverscrolljs'); 设置样式不少人反馈用了这个组件之后不能滑动，其实是样式没有写好。按照上面的布局，你的样式应该包含下面这段： html, body { width: 100%; height: 100%; } #container { height: 100%; } 实例化组件 var list = ['container']; var prevent = new PreventOverScroll({ list: list }); 区分安卓和IOS 因为安卓不支持原生的橡皮筋效果，而且安卓在div内的滑动效果很差，所以上述组件应该这样实例化： var outer = ( isAndroid // do it yourself ? 'wrapper' : 'container' ); var list = [outer]; var prevent = new PreventOverScroll({ list: list });

h5页面解决ios滚动条生涩，不能滚动的问题-react篇

weixin_43956521的博客

06-20

1527

背景：h5页面有滚动条的场景，在ios手机或者微信上面滚动显得生涩 css解决： -webkit-overflow-scrolling:touch; -webkit-text-size-adjust:none; 场景页面有两层滚动条嵌套，（页面滚动，并且弹窗滚动条也可以滚动）解决思路：弹窗出现时候页面fixed定位，弹窗上面滚动条通过获取原生属性scrollTop设置为0，默认滚动条在最顶部 react解决： this.scrollBox = React.createRef() this

h5在ios下拉上拉会带动整个页面滑动

曲小强

09-18

2206

html,body,#app { width: 100%; // 删掉 height: 100%; // 删掉 background-color: #F5F5F5; } 只要删掉这俩个属性就行了让内容自由的撑开就可以

解决iOS12及一下弹框滚动会带动body内容滑动

chi1130的博客

11-21

1347

前言在移动项目开发中往往会写一些 H5 页面，一个项目可能只有一两个页面，引入其他 UI 组件项目显得太臃肿，也没有啥必要，毕竟那些组件都是被人写的，有的时候不能一味的去使用他人写好的代码，有时间也需要自己谢谢，锻炼自己的同时也在巩固一些基础知识～～问题一个页面弹出一个框，框里的内容可以滚动，但是滚动弹框时，body 内容也在动【前提是你的 body 超过屏幕的高度】，然而在 iOS13 ...

H5 --（解决）ios的webview中上/下拉露出黑灰色背景问题

凉凉的博客

04-18

7856

问题描述：手机H5页面在ios的webview中，下拉（或上拉）会露出黑灰色背景解决思路 1、touchmove 时阻止系统的默认滑动事件 document.querySelector('body').addEventListener('touchmove', function(e) { e.preventDefault(); }) 结论：这个方法在安卓上能好使，但在io...

解决h5页面在ios中可以拖动的bug

Afterwade的博客

12-30

1817

参考链接：http://www.javashuo.com/article/p-bfdsqpgw-y.html

H5页面IOS系统的滚动条怎么去掉

LILEILEILOVE的博客

07-15

2469

设置css样式，要加这两句 ::-webkit-scrollbar { display:none； width:0; } 加上下面这两句可以让滚动更加流畅 -webkit-overflow-scrolling: touch; overflow-scrolling: touch;

ios webview加载html5页面,iOS使用WKWebView加载HTML5不显示屏幕宽度的问题解决

weixin_39626181的博客

06-04

192

最近在项目中我们的商品详情页是一个后台返回的图片标签。需要我们自己去写一个HTML5标签进行整合，(相当于重新写了一个HTML页面):ok_hand:那就没办法了，我就自己写一个标签咯，应该不难吧。嘻嘻嘻嘻~~~~~dispatch_async(dispatch_get_main_queue(), ^{if(self.detailModel.details){//这里是自己写的简单的加载H5NSS...

css ios中使用overflow ：auto 时滑动时随着手指滑动问题

qyx189573的博客

07-04

423

添加css

js实现h5页面滑动到最底部触发内容加载