避免在使用-webkit-overflow-scrolling:touch的元素上设置定位(如relative、fixed、absolute),或者手动设置定位为static,以解决因定位导致的滚动问题。 如果在启用-webkit-overflow-scrolling:touch的元素上动态添加内容导致页面无法滚动,可以尝试在下一层子元素上将height加1%或1px,以主动触发滚动条更新。 在某些情况下,给...
实际上,Safari真的用了原生控件来实现,对于有-webkit-overflow-scrolling的网页,会创建一个UIScrollView,提供子layer给渲染模块使用。创建时的堆栈如下: 代码语言:javascript 复制 Thread1,Queue:com.apple.main-thread #00x00086723in-[UIScrollView initWithFrame:]()#10x004ec3bdin-[UIWebOverflowScrollView initWit...
-webkit-overflow-scrolling:触摸;是一个用于控制移动设备上滚动容器滚动效果的CSS属性。如果该属性值无效,可能是由于浏览器不支持、CSS语法错误、元素类型不支持或其他CSS规则冲突等原因。在解决问题时,可以考虑使用其他滚动效果或JavaScript库来实现所需的滚动行为。
如果在-webkit-overflow-scrolling:touch属性的元素上,想通过动态添加内容来撑开容器,触发滚动,是有bug 的,页面是会卡住不动的。 解决方法就是在webkit-overflow-scrolling:touch属性的下一层子元素上,将height加1%或1px。从而主动触发scrollbar。 以上是自己在项目过程中遇到的坑,如果小可爱们有发现新的坑,欢迎告知!
-webkit-overflow-scrolling:touch这个属性真的是各种坑,我研究这个属性已经大半年了,还没有发现能够在safari上完美使用无bug的例子。 最常见的例子就是, 在safari上,使用了-webkit-overflow-scrolling:touch之后,页面偶尔会卡住不动。 在safari上,点击其他区域,再在滚动区域滑动,滚动条无法滚动的bug。
如果-webkit-overflow-scrolling属性在某些情况下无法满足需求或导致兼容性问题,可以考虑使用其他滚动库(如iScroll、better-scroll等)来实现自定义滚动效果。这些库通常提供了更丰富的功能和更好的兼容性。 综上所述,-webkit-overflow-scrolling属性虽然为iOS设备上的滚动提供了更加流畅的体验,但在使用时也需要注意其兼容...
ioscsssafariwebkit 66 如果我在一个滚动的div上使用-webkit-overflow-scrolling属性,它会以本地动量完美地滚动。但是,这个div本身有时候会冻结并且不响应我的手指移动。2-3秒钟后,它又变得可以滚动。 我不知道我如何复现这个问题。但是,我发现有两种主要行为会导致这种情况。 第一,如果我等待一段时间,例如20秒,...
-webkit-overflow-scrolling:auto | touch 默认值:auto 适用于:块容器,伸缩盒容器,grid容器 继承性:无 动画性:否 计算值:指定值 取值: auto: 默认值。当手指从触摸屏上移开,滚动会立即停止,相当于普通的滚动效果。 touch: 使用具有回弹效果的滚动,当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继...
-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。 touch: 使用具有回弹效果的滚动,当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈...
1. -webkit-overflow-scrolling:touch是什么? MDN上是这样定义的: -webkit-overflow-scrolling属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。 touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和...