-webkit-overflow-scrolling:touch; ios橡皮筋效果卡屏,滚动穿透 --已解决

本文探讨了`-webkit-overflow-scrolling:touch`在iOS设备上可能导致的滚动卡屏和滚动穿透问题。当使用`touch`值时,页面有时会卡住。分析表明,在滚动条到达顶部或底部时出现此问题。解决方案是监听滚动位置,防止滚动条到达边界。此外,针对滚动穿透问题,提出在弹窗显示时固定底部滚动内容并设置`position: fixed`来避免事件穿透。
摘要由CSDN通过智能技术生成
-webkit-overflow-scrolling 属性

MDN中概述 入下

-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.

值选项

1、auto
使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止
2、touch
使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

问题 BUG
1、使用了-webkit-overflow-scrolling:touch之后,页面偶尔会卡住不动。

复现场景:发现页面在滚动期间是不会出现卡住的问题,但是在滚动条到顶部或者底部的时候会出现这个问题
分析问题:如果在到达顶部/底部的时候不让它到达顶部/底部,是不是可以规避这个问题
解决办法: 在滑动的时候为滑动区域添加 scroll事件监听滚动条是否到了底部/顶部 如果到了顶部/底部那么让scrollTop1相应的减少 1;
代码如下:

// js 文件

// 获取滚动区域
let el = document.getElementById('scrollSectionArea') 
// 获取滚动内容的高度 如果是在是vue 使用动态的获取高度请将获取元素替换为 ref 来获取,不然是获取不到高度的 在监听函数内部注意this指向
let scrollHeight =  document.getElementById('scrollSection')
### 回答1: -webkit-overflow-scrolling: touch; 是一个CSS属性,用于在移动设备上实现平滑的滚动效果。它可以应用于具有滚动内容的元素,例如 div 或 iframe。当用户在移动设备上滚动该元素时,它将以流畅的方式滚动,而不是像默认滚动一样卡顿。 ### 回答2: -webkit-overflow-scrolling:touch;是一个CSS属性,用于移动设备的浏览器中控制页面滚动的行为。当一个页面在移动设备上被访问时,其内容有可能会超过设备屏幕的大小,此时就需要滚动来查看页面内容。但是,在移动设备上的滚动效果相较于在桌面电脑上的体验要差很多,因为它们通常会有卡顿、慢反应或跳跃等不良效果。这样的效果会影响用户的体验,因此必须要采用一些方法来改善这种情况。 -webkit-overflow-scrolling:touch;可以帮助我们实现流畅的滚动效果,消除卡顿、慢反应和跳跃等问题。这个属性是仅适用于 Webkit 内核的,因此在移动设备上使用较为广泛。它会在页面滚动时使用硬件加速来优化滚动性能,从而实现更加平滑、自然的滚动。 这个属性使用起来非常简单,只需要将它添加到滚动区域的 CSS 样式中即可。例如: #scrollable { height: 150px; -webkit-overflow-scrolling: touch; overflow-y: auto; } 在这个例子中,页面中的一个元素被定义为滚动区域。当使用触摸设备滚动时,-webkit-overflow-scrolling:touch;会生效,从而确保滚动平滑自然。 总之,-webkit-overflow-scrolling:touch;是一个非常有用的属性,它可以提高移动设备上页面滚动的性能和用户体验。无论是开发移动网站还是移动应用,我们都应该考虑使用这个属性来改善用户体验。 ### 回答3: -webkit-overflow-scrolling: touch;是一个CSS属性,用于在屏幕上启用流畅的滚动功能。它主要应用于移动设备上的网页浏览器。通过启用此属性,用户可以在触摸屏上轻松地使用手指来滚动页面,而不会出现卡顿或延迟的情况。 该属性只能在Webkit浏览器中使用,以确保兼容性。它适用于大多数常见的移动设备和平板电脑,包括iPhone, iPad, Android手机和平板电脑等。 此属性的主要目的是优化网页在移动设备上的用户体验。由于移动设备的屏幕尺寸通常较小,因此需要在较小的屏幕上显示更多的内容。通过使用此属性,用户可以轻松地滚动网页并捕捉所需要的内容,而无需缩放视图或调整字号。 此外,-webkit-overflow-scrolling: touch;还可用于增强应用程序的用户体验。例如,在移动应用程序中,可以使用此属性使用户可以轻松地滚动列表或其他元素。 总之,-webkit-overflow-scrolling: touch;是一种对网页和应用程序的特殊效果,可以在移动设备上改善用户体验。它通过启用流畅的滚动功能,让用户可以轻松地浏览内容,缩小了移动设备和桌面网页之间的差距。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值