IOS微信下问题2 页面滚动失效

最新推荐文章于 2024-06-05 21:28:45 发布
最新推荐文章于 2024-06-05 21:28:45 发布
阅读量890 收藏 2
点赞数
分类专栏： 移动端问题 JavaScript 文章标签： 页面滚动失效 IOS微信下页面滚动失效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dk123sw/article/details/103887221
版权

建议先看这篇文章   (-webkit-overflow-scrolling:touch)

下面 说一下点击其他区域，再在滚动区域滑动，滚动条无法滚动 这个bug

问题复现：

由非滚动区域向滚动区域滑动，再迅速滑动滚动区域，此时滚动会出现bug

在一个可上下滑动的区域，滚动条在最上面再向上滑动或滚动条在最下面再向下滑，松手后立即滑动滚动区域，滚动出现bug

                                          

最低0.47元/天 解锁文章
不完全解决ios浏览器页面滚动到底部或顶部后导致页面局部滑动失效的问题
weixin_34326558的博客
02-20 6118
npm插件ios-scroll-supply 1.首先给需要滑动的元素加一个touchmove事件，事件触发的时候给event设置一个属性isSCROLL为true； 2.然后给body加touchmove事件，触发事件时判断event的isSCROLL属性是否为true，否的话就禁止默认事件 3.是的话代表点击的事件源为需要滑动的元素，判断其滑动的最高点和最低点加一个限制就ok了，类似...
解决微信小程序IOS系统在input失去焦点后马上滑动页面会导致整个页面布局改变
番茄Salad
07-31 514
解决微信小程序IOS系统在input失去焦点后马上滑动页面会导致整个页面布局改变
记录解决IOS滚动跳转不生效问题
Mr.小灰狼_随笔
08-24 1020
记录解决IOS滚动跳转不生效问题 目录 背景 ： 解决过程 ： 解决方案 ： 最终代码 ： 背景 ： 项目类似于问卷星里面的问卷调查，当你点击提交按钮时， 页面会有弹窗提醒你有哪些题型没回答，点击确认之后， 页面滚动条会自动跳转至未回答项的 offsetTop 高度位置
解决微信浏览器公众号h5页面ios苹果机不能上下滑动
天弃的博客
11-08 5092
这个月做个项目，要求做个h5，然后放到微信公众号里使用。开发完部署之后发现苹果机的页面是不能上下滑动的，好像写了个fixed固定住了似的，但是有意思的是，两个手指头按屏幕滑动是可以滑动的，两个手指头放上去右侧会显示滚动条，有滚动条就会滑动，滚动条消失滑动不了。 因为我们以前几乎都是用uni-app做的H5，所以打的包都是人家uniapp打了自己的东西弄好的，部署直接可以滑，但是我们这次是自己搭的框架（我们直接建的vue项目），所以部署之后遇到了问题。 起初刚开始只能百度搜，但是百度搜出来的答案，
微信网页ios端不能滚动
xiaopangzipy的博客
10-21 613
微信页面ios端没有滚动效果，安卓端正常，在最外层元素上添加css样式即可。 -webkit-overflow-scrolling: touch; //ios滚动
微信小程序view-scroll的ios真机点击跳转返回之后无法滚动
一梦成回忆
12-29 650
微信小程序view-scroll的ios真机点击跳转返回之后无法滚动 <scroll-view scroll-y="true" @scrolltolower='toBottom' class="scrollView" lower-threshold='5' @refresherrefresh='pullResert' refresher-enabled="true" :refresher-triggered="triggered"> //列表list
微信小程序在ios下Echarts图表不能滑动的问题解决
12-10
在微信小程序中，开发者经常遇到的一个问题是iOS设备下Echarts图表无法正常滑动的问题。这个问题主要体现在用户尝试在包含Echarts图表的页面上下滑动时，手指接触到图表区域时页面无法滚动。这个问题的原因在于微信...
解决页面使用overflow: scroll在iOS上滑动卡顿的问题1
08-03
标题中的“解决页面使用overflow: scroll在iOS上滑动卡顿的问题1”指的是在iOS设备上，当HTML元素使用CSS属性`overflow: scroll`时，滚动可能会变得卡顿不顺畅。这个问题通常不会在Android设备上出现，使得开发者...
解决iOS下无法触发focus事件的问题
08-27
"解决iOS下无法触发focus事件的问题" 在移动端开发中， focus 事件是一个非常重要的事件，它可以帮助开发者更好地控制用户的输入行为。但是在iOS平台上，触发 focus 事件却是一个非常棘手的问题。本文将为大家分享...
关于移动端h5页面不能滑动问题的解决办法
tao__f的博客
09-15 8415
页面不能滑动无非就是css和js两个方面的问题 有的人说如果我写很多个p标签不写任何样式看能不能滑动，如果能滑动说明是样式的原因，要是也不能滑动那就应该是js的原因，是有一定的道理的，但是先别忘了看一下你的html或body是不是加了height：100%；overflow：hidden； 1.下面分先说css的问题，主要排查overflow：hidden； // 阻止弹框滚动穿透 e.preventDefault(); e.stopPropagation()不起作用; useEffect(() =
ios系统的微信浏览器中 h5页面 整体可以拖动的Bug修复
Lei_zhen96的博客
07-24 4206
因为做一个 底部是固定的导航，头部是固定标题(全为absolute定位，ios系统下的fixed布局有bug)， 中间是内容页。 首先这三部分保持在同一个层级，内容部分因为有下拉刷新的功能，所以页面是有垂直滚动条的。 在ios系统中发现，当touch位置在比较偏上或者偏下的情况下，手指拖动整个页面，会导致整个页面整体被拖动，然后内容页的滚动部分会发生...
解决微信端ios页面滚动卡住 -- 工作笔记
simper_boy的博客
06-28 3017
直接贴代码跟图，等会再解释 左边页面是滚动的，.container元素包含需要滚动的内容，关键代码是给container（正常文档流下，可以手动添加position:static）加上 overflow: auto; -webkit-overflow-scrolling: touch;（） ...
ios系统微信小程序scroll-view划不动的问题
每天都记录一点点！
02-04 5877
这段时间开发个微信小程序的点餐系统，因为只需要小程序版本，所以就用原生的小程序写了，过程中遇到了几个问题和坑，就总结一下，方便来后者。 商品分类和商品列表的左右联动，像美团和饿了么那样的交互，点击某个分类滑动到对应的商品列表，随意滑动商品列表商品分类也会做对应的切换，我个人的实现方案如下： 要用到scroll-view的to-view属性 每个商品的高度都是固定的，所以要开始计算好每个类目对应的商品列表的高度，在滑动商品的时候实时获取scrollTop,然后再让商品分类列表做对应的切换 主要代码如下：
微信小程序---scroll-view在苹果手机上触底或触顶页面闪动问题
10-08 1518
在项目开发中遇到一个关于scroll-view的的问题，具体如下： 项目要求是横向滚动，由于直接在scroll-view组件设置display：flex不生效，因此考虑直接在scroll-view下增加一个wrap，将所有的item放在wrap内， 将wrap设置为display：flex,这种方式在安卓手机不会导致任何问题，在苹果手机样式也不会有什么问题，但是当item的个数较多导...
微信小程序页面在苹果手机上滑动，整个页面会拖动的问题解决办法
qq_44749901的博客
03-14 5132
在微信小程序app.json的window中，添加”disableScroll”:true，但是要注意，如果你是要在app.json中添加disableScroll，会导致所有页面无法上下滑动，这就是个大bug了，解决也很简单，你想在那个页面禁止页面滑动，就在哪个页面的json下，添加disableScroll就可以了，单独设置就行。*catchtouchmove相当于preventDefault，阻止默认行为即阻止滚动事件。*然后给长页面设置高度，再添加overflow: auto;
ios 内层滚动到顶部或者底部无法滑动问题
本杰明的博客
09-06 2829
/** * 处理一像素 */ scrollFix() { // 滚动容器dom const elem = this._container if (!elem) { return } // 兼容第一次滑动 elem.scrollTop += 1 // 绑定事件 elem.addEventListener('sc
微信小程序苹果手机上下拉刷新，回弹时页面越界问题
weixin_33749242的博客
12-06 765
这两天在做微信小程序项目时发现，一个可以下拉刷新的页面，在下拉刷新获取数据成功后，调用wx.stopPullDownRefresh()方法回弹刷新头时，在安卓手机上可以正常回弹，但是在苹果手机上，刷新头回弹时，会出现页面顶部越界被标题栏挡住一部分，然后再回弹至正常位置的问题。 经过多次的尝试，发现问题是出现在下拉刷新获取数据的同时，还调用了wx.showLoading()方法。只要把wx.show...
小程序解决 iOS 边界滚动橡皮筋效果问题记录
qq18285的博客
06-05 1252
在 iOS 设备上，当用户滚动到页面底部并继续下拉时，会触发边界滚动橡皮筋效果，导致页面回弹。这种回弹会改变滚动状态 (回弹时向上滚动)，使得。最初，我通过监听滚动事件来实现隐藏功能。当检测到用户向下滚动时，隐藏。获取滚动位置信息，并判断是否滚动到底部。// 引入 lodash 的 debounce 函数。否则，根据滚动方向决定是否隐藏。/* 在子元素之间均匀分布 */在滚动事件处理函数中，使用。在滚动事件处理函数中，使用。/* 占据剩余空间 *//* 内部中心对齐 *//* 中心对齐 */
两个div 同步滚动 兼容safari
weixin_30536513的博客
07-17 165
<style type="text/css"> div{ overflow-x:scroll; width:10%; height:10%; border:1px blue solid; position:relative; } </style> &lt...
uniApp 微信小程序textarea无法滚动
最新发布
01-12
### uniApp 微信小程序 textarea 滚动失效解决方案 在处理uniApp微信小程序中`textarea`无法正常滚动的问题时，可以采取多种策略来确保用户体验良好。对于iOS设备上的特定问题，即输入法弹起后换行输入内容被遮挡的情况，可以通过调整样式和逻辑顺序加以改善[^2]。 针对`textarea`位于`position: fixed`容器内的场景下出现的占位符(`placeholder`)随滚动条移动丢失的现象，官方提供了解决方案——通过设置组件属性`fixed="true"`使`placeholder`保持稳定显示[^3]。 另外，在某些情况下，焦点切换过快可能导致页面未能及时响应布局变化从而影响滚动效果。对此，可以在获取到软键盘高度变更通知后再执行页面滚动操作，并适当延时以等待DOM更新完毕[^4]。 #### 实现代码示例： 为了更好地理解如何应用上述建议，下面给出一段简单的实现代码作为参考： ```javascript // 组件挂载完成后初始化监听器 onMounted(() => { // 添加对键盘高度改变事件的关注 plus.key.addEventListener('keyboardheightchange', (e) => { const newHeight = e.height; setTimeout(() => handleScroll(newHeight), 0); // 延迟执行滚动函数以便于DOM完成重绘 }); }); function handleScroll(keyboardHeight){ let scrollEl = document.querySelector('.scroll-container'); // 获取需要滚动的目标元素 if (!scrollEl || keyboardHeight === 0) return; // 动态计算并设置新的底部外边距 scrollEl.style.marginBottom = `${keyboardHeight}px`; // 将目标元素滚动至最底端 scrollEl.scrollTop = scrollEl.scrollHeight; } ``` 此段JavaScript代码展示了如何监听软键盘的高度变动，并据此动态调整页面结构以及触发相应的滚动行为，以此解决由于快速聚焦所引起的视觉错乱问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值