解决overflow: auto在Ios中滑动不流畅

最新推荐文章于 2022-07-04 09:39:03 发布
最新推荐文章于 2022-07-04 09:39:03 发布
阅读量1.5w 收藏 6
点赞数 1
分类专栏： bug及解决方案

【bug】—— H5页面在 ios 端滑动不流畅的问题

IOS系统的惯性滑动效果非常6，但是当我们对div加overflow-y:auto;后是不会出这个效果的，滑动的时候会感觉很生涩。怎么办？

方案一：

在滚动容器内加-webkit-overflow-scrolling: touch

但这个方案有一个问题，在页面内具有多个overflow：auto的情况下，那些具有 绝对定位（absolute, fixed） 属性的元素，也会跟着滚动。

方案二：

body {overflow-x: hidden}

即，给 body 元素添加overflow-x：hidden。然后在滚动容器内加overflow-y: auto

David-wenwen
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iOS Safari浏览器上overflow: scroll元素无法滑动bug解决方法整理
weixin_33851429的博客
01-09 3396
描述 此bug出现需要条件：父元素需使用绝对定位absolute或固定定位fixed，使用overflow: scroll / auto（或overflow-y: scroll / auto)，内部子元素是动态大小（例如较大的svg document，近似为内嵌iframe，等等）。 bug出现原因：没有相关官方文档描述该bug。在查阅文...
解决页面使用overflow: scroll在iOS上滑动卡顿的问题1
08-03
标题中的“解决页面使用overflow: scroll在iOS上滑动卡顿的问题1”指的是在iOS设备上，当HTML元素使用CSS属性`overflow: scroll`时，滚动可能会变得卡顿不顺畅。这个问题通常不会在Android设备上出现，使得开发者...
解决 overflow:auto； 滑动不流畅
weixin_46858893的博客
04-23 675
-webkit-overflow-scrolling: touch;
h5苹果ios系统中overflow: auto滑动不流畅
dnpao的专栏
08-02 7898
方案一： 在滚动容器内加-webkit-overflow-scrolling: touch 但这个方案有一个问题，在页面内具有多个overflow：auto的情况下，那些具有 绝对定位（absolute, fixed） 属性的元素，也会跟着滚动。 方案二： body {overflow-x: hidden} 即，给 body 元素添加overflow-x：
css ios中使用overflow ：auto 时 滑动时随着手指滑动问题
qyx189573的博客
07-04 389
添加css
css中overflow:auto滚动条滚动效果在IOS中不流畅，出现卡顿
gll77
03-26 1947
在设置overflow：auto的元素标签上添加属性： -webkit-overflow-scrolling: touch;即可解决。参考链接：https://www.cnblogs.com/wangweipeng/p/5861633.html
overflow:auto的用法详解
01-18
overflow：auto；如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容。 flex中的属性 display: flex; flex-direction: column; 主轴为垂直方向，起点在上沿。 overflow和flex布局搭配使用 代码如下： &lt...
微信小程序overflow:auto; ios设备卡顿问题
01-03
我们在开发微信小程序的时候，经常会使用到overflow:auto;来实现局部滚动效果，稍微注意的码有就会发现，ios真机设备上会有很明显的卡顿，但安卓设置就没这个问题。 解决方式 view{ overflow:auto; -webkit-...
ie7中overflow:auto无效的解决方法
09-24
在IE7浏览器中，开发者可能会遇到一个常见的布局问题，即`overflow:auto`属性在某些情况下不起作用，导致预期的滚动效果无法实现。这个问题通常与元素的`position`属性有关，特别是当子元素设置为`position:relative...
详解CSS中zoom属性或overflow:auto属性清除浮动的作用
11-21
因为Zoom属性是IE浏览器的专有属性，所以他清除浮动作用只适用于IE浏览器，而Firefox、google等浏览器则需要使用overflow:auto属性来清除浮动。所以要达到兼容IE6、IE7、IE8、Firefox、google浏览器的时候就必需使用...
详解overflow-scrolling解决滚动卡顿问题
01-18
前言 如果你对某个div或模块使用了overflow: scroll属性，在iOS系统的手机上浏览时，则会出现明显的卡顿现象。但是在android系统的手机上则不会出现该问题。 解决方法 以下代码可解决这种卡顿的问题：-webkit-overflow-scrolling: touch;，是因为这行代码启用了硬件加速特性，所以滑动很流畅。这个方法的确可以解决ios5.0、android4.0以后系统的滑动卡顿问题。 -webkit-overflow-scrolling: auto  |  touch; auto： 普通滚动，当手指从触摸屏上移开，滚动立即停止 touch：滚动回弹效果，当手指从触
iOS 移动端overflow:auto 滚动不平滑及bug处理
张营的技术博客
07-23 4051
在苹果手机上使用overflow:auto 默认滚动不平滑。 解决方案是使用-webkit-overflow-scrolling:touch bug： 会导致使用固定定位的元素，随着页面一起滚动。 fix bug: 把固定元素不放在可滚动区域，在外层在加一层。 详细有关ios滚动惯性的问题移步：ios与惯性滚动...
手机端局部滚动问题 overflow-y:auto
p15097962069的博客
11-17 1417
手机端局部滚动问题 overflow-y:auto
IOS 浏览器上设置overflow: auto 不可滚动
weixin_30644369的博客
02-14 378
项目中最近遇到一个bug,在ios上出现的问题：原页面是在某一块地方滚动，但是改版后，滚动区域改为最外层元素，最外层包裹了一层class为main的div .main { position: fixed; left: 0; right: 0; bottom: 0; top: 0; overflow-y: auto; -w...
ios下元素溢出设置 overflow:auto; 不能滑动解决办法
weixin_30326741的博客
08-28 480
ios下元素溢出设置overflow:auto;不能滑动解决办法： 　　overflow:auto; 　　overflow-y:scroll; 　　-webkit-overflow-scrolling:touch; 　　height:200px; 转载于:https://www.cnblogs.com/rainheader/p/4766077.html...
overflow:auto滚动在移动端出现滑动不流畅问题
weixin_34117522的博客
03-10 1955
2019独角兽企业重金招聘Python工程师标准>>> ...
解决手机端中overflow: auto引起的内容滑动卡顿问题
NanChen的博客
12-31 999
把overflow:auto换成设置兼容手机端的触摸事件 overflow: auto;-webkit-overflow-scrolling:touch;
解决ios手机端div是overflow: auto;引起的内容滑动卡顿问题
elementFei的博客
11-24 5499
给div盒子 设置 overflow-y: scroll;  -webkit-overflow-scrolling: touch;
vue overflow-y 滑动到边界，会使弹窗底部滑动
最新发布
06-02
如果您在 Vue 中使用 `overflow-y` 属性来实现滚动，并且滚动到边界时出现了弹窗底部滑动的问题，可能的原因是滑动时触发了浏览器的默认行为，导致整个页面的滚动。为了避免这种情况，您可以尝试在滑动事件中调用 `event.preventDefault()` 方法来阻止默认行为的发生。 以下是一个使用 Vue 实现的示例代码，您可以参考一下： ```html <template> <div class="container" ref="container" @scroll="handleScroll"> <div class="content"> <!-- 此处为滚动内容 --> </div> <div class="popup" ref="popup"> <!-- 此处为弹窗内容 --> </div> </div> </template> <script> export default { methods: { handleScroll(event) { const container = this.$refs.container; const popup = this.$refs.popup; const scrollTop = container.scrollTop; const containerHeight = container.offsetHeight; const popupHeight = popup.offsetHeight; const popupTop = popup.offsetTop; const popupBottom = popupTop + popupHeight; // 判断弹窗是否在可视区域内 if (popupBottom > scrollTop && popupTop < scrollTop + containerHeight) { // 如果弹窗底部超出可视区域，则将容器滚动到弹窗底部 if (popupBottom > scrollTop + containerHeight) { container.scrollTop = popupBottom - containerHeight; } // 如果弹窗顶部超出可视区域，则将容器滚动到弹窗顶部 if (popupTop < scrollTop) { container.scrollTop = popupTop; } // 阻止默认行为 event.preventDefault(); } } } }; </script> <style> .container { height: 200px; overflow-y: scroll; } .popup { position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; background-color: #fff; } </style> ``` 在上述代码中，我们在 `handleScroll` 方法中判断弹窗是否在可视区域内，并根据其位置调整容器的滚动位置。同时，如果弹窗在可视区域内，我们还会调用 `event.preventDefault()` 方法来阻止默认行为的发生，以避免整个页面的滚动。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值