search

ustbhuangyi / better-scroll

:scroll: inspired by iscroll, and it supports more features and has a better scroll perfermance
https://better-scroll.github.io/docs/en-US/
MIT License
16.45k stars 2.61k forks source link

IOS设备滑动时，手动按住停止时有抖动现象 #580

Open brucesq opened 6 years ago

brucesq commented 6 years ago

Version

undefined

Reproduction link

https://ustbhuangyi.github.io/better-scroll

Steps to reproduce

使用iphone设备，滑动时，手动触摸屏幕让滑动停止，会有抖动现象 测试的设备有iphone7、iphone8、iphonex，系统是ios11

复现的话，用iphone访问https://ustbhuangyi.github.io/better-scroll/#/examples/goods-list/en

What is expected?

不应该出现抖动现象

What is actually happening?

手动停止滑动时出现了抖动现象

ustbhuangyi commented 6 years ago

这个问题如果使用 CSS3 Transition，基本无解，本质上就是让一个拥有 transition 动画的元素中途停止，解决方案是利用 getComputedStyle 去计算位置，然后动态设置。这个在 iOS 设备上是不准的，至少目前看来，苹果也没有解决这个问题。 有一个办法就是配置 useTransition 为 false，这样的话 better-scroll 的滚动就会基于 raf，变成了 JS 帧动画，好处是不会有抖动问题，也不会有快速滑动的白屏问题，但是缺点是如果是滚动性能没有使用 CSS3 动画流畅，但是如果是 iphoneX 这样的高端机器，JS 动画也很流畅。。

lynxerzhang commented 6 years ago

我最近也遇到类似问题，测试下来，useTransition设为false的话，iPhone7运行算流畅的，iPhoneX没有尝试，但是肯定更流畅，但是iPhone6就有明显卡顿，同时我做了一个测试，就是发现可能和iOS系统有关，同样的设置，useTransition为true，iOS11.2以上就有问题，是不是iOS11.2以上某些css属性有兼容问题了？或者是css动画有兼容问题？如果不设置eventPassthrough: "horizontal"是好的，但是我的需求就不满足了...

//这个设置在iOS11.2以上有问题，
//如果useTransition设为false，都正常，但是低版本iPhone，比如iPhone6，就会有卡顿
this.betterScroll = new BScroll(wrapper, {scrollbar: {fade: true}, eventPassthrough: "horizontal", useTransition: true});

大家是怎么解决这个问题的？

alicksnake22 commented 6 years ago

配置 useTransition 为 false,6s变为轻微抖动，iphonex不抖，然而也不算流畅。但是一旦把数据加到比较大，例如3000条，那么基本上划不动，安卓ios也划不动。如果配置useTransition为true，3000条也很流畅

dyyliao123 commented 6 years ago

这个问题怎么解决，兄弟们

xg-qd commented 6 years ago

3000条的话 就要考虑dom开销了 你可以试一下写成container只显示3倍容器的dom，滚动的过程中动态增删

ustbhuangyi commented 6 years ago

无限滚动已经支持了，几万条数据也毫无压力，可以了解一下：https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options-advanced.html#infinityv1120

xg-qd commented 6 years ago

嗯 是的 我后来在文档中看到了，谢谢

hasbug commented 6 years ago

IOS11以上都卡顿，怎么办？

ningsy1017 commented 5 years ago

如果我滚动盒子里有另一个元素在拖动时会触发列表的scroll事件 要如何在拖动时关闭滚动？

tansj526 commented 5 years ago

这个问题还有解决的可能吗，用手轻轻的滑动，页面会抖动的比较明显，让人会头晕。但是模拟器没有这个问题呢？

chengwenLi1 commented 4 years ago

这个问题还有解决的可能吗，用手轻轻的滑动，页面会抖动的比较明显，让人会头晕。但是模拟器没有这个问题呢？

请问这个问题你有解决嘛？ @tansj526

dingjunwei1314 commented 4 years ago

这个问题还有解决的可能吗，用手轻轻的滑动，页面会抖动的比较明显，让人会头晕。但是模拟器没有这个问题呢？

xxswklLxy commented 4 years ago

useTransition 为 false时 跟keep-alive配合使用时页面会卡死点击也用不了这个是什么问题呢？ 测试机型iphone7

solome commented 4 years ago

在iOS抖动 问题可以保证 translateY(-617.314px) 值取整能极大 缓解。

https://github.com/ustbhuangyi/better-scroll/blob/0ffe17a3dbbd08aacbb8570953fd212e79ea5e05/packages/core/src/translater/index.ts#L52-L58

chenyulun commented 4 years ago

其实我主要想用上拉加载更多和下拉刷新，中间使用原生滚动，监听scroll位置，如果到了0的时候在注入下来刷新的CSS3 Transition， 滚动到底部的时候在触发上拉加载的css3d动画，这样是不是能解决一部分问题，或者能让我设置使用原生滚动,

期待解决这个难题

ganshiqingyuan commented 3 years ago

最后咋解决呢，，，js滚动还是不流畅啊，，iphone12都不行，，，

ChuanChuanSu commented 3 years ago

无限滚动已经支持了，几万条数据也毫无压力，可以了解一下：https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options-advanced.html#infinityv1120

链接失效了，有最新链接吗？

wwdDongDong commented 2 years ago

在安卓vivo s9 手机上也遇到了这个问题

dqm07 commented 4 months ago

咱们这个问题在ios上设置useTransition:false以后，损失的性能部分还有办法解决吗？

wwdDongDong commented 4 months ago

咱们这个问题在ios上设置useTransition:false以后，损失的性能部分还有办法解决吗？

我已经没有碰到这个问题了 不过目前我实际项目当中感受到的是dom元素越少 效果就挺好 目前没有出现这个抖动了 可能是我的样式吗？我并没有设置useTransition:false 目前一切很流程

dqm07 commented 4 months ago

咱们这个问题在ios上设置useTransition:false以后，损失的性能部分还有办法解决吗？

我已经没有碰到这个问题了 不过目前我实际项目当中感受到的是dom元素越少 效果就挺好 目前没有出现这个抖动了 可能是我的样式吗？我并没有设置useTransition:false 目前一切很流程

不设置useTransition:false的话，在ios滚动是很流畅，但是快速滑动手动点击停止会出现轻微的抖动。一旦设置了false就会有性能的丢失，就是会感觉到滚动不流畅，想提升一下这个部分的体验。

wwdDongDong commented 4 months ago

咱们这个问题在ios上设置useTransition:false以后，损失的性能部分还有办法解决吗？

我已经没有碰到这个问题了 不过目前我实际项目当中感受到的是dom元素越少 效果就挺好 目前没有出现这个抖动了 可能是我的样式吗？我并没有设置useTransition:false 目前一切很流程

不设置useTransition:false的话，在ios滚动是很流畅，但是快速滑动手动点击停止会出现轻微的抖动。一旦设置了false就会有性能的丢失，就是会感觉到滚动不流畅，想提升一下这个部分的体验。

我觉得你可以尝试最新版本的betterscroll 不过我用的1.15.2版本，唉像h5页面在移动端 目前我已经感受到了不专业 emmm,就是本来是安卓/IOS开发 结果变成了 前端开发…… 目前市面上我也找不到很好的插件，我建议这个better-scroll插件你在用的时候 尝试改变样式 比如position:absolute;top:0;bottom:0;width:100%;overflow:hidden;我目前就是这么做的，目前看着没有抖动，另外，也有可能是我写的app页面滚动列表当中的dom节点很少的原因，你可以尝试删除一些dom结构，再试试，类似淘宝首页，滚动到底部再加载dom,又或者十万行无限滚动表格，那个实现思路，emmm，我也描述不清楚，我觉得你的问题应该就是dom太多的原因，导致卡顿吧。如果不是，我也不太清楚了，另外 我不是这个问题的发起者哦，你看看是不是搞错啦？

dqm07 commented 4 months ago

咱们这个问题在ios上设置useTransition:false以后，损失的性能部分还有办法解决吗？

我已经没有碰到这个问题了 不过目前我实际项目当中感受到的是dom元素越少 效果就挺好 目前没有出现这个抖动了 可能是我的样式吗？我并没有设置useTransition:false 目前一切很流程

不设置useTransition:false的话，在ios滚动是很流畅，但是快速滑动手动点击停止会出现轻微的抖动。一旦设置了false就会有性能的丢失，就是会感觉到滚动不流畅，想提升一下这个部分的体验。

我觉得你可以尝试最新版本的betterscroll 不过我用的1.15.2版本，唉像h5页面在移动端 目前我已经感受到了不专业 emmm,就是本来是安卓/IOS开发 结果变成了 前端开发…… 目前市面上我也找不到很好的插件，我建议这个better-scroll插件你在用的时候 尝试改变样式 比如position:absolute;top:0;bottom:0;width:100%;overflow:hidden;我目前就是这么做的，目前看着没有抖动，另外，也有可能是我写的app页面滚动列表当中的dom节点很少的原因，你可以尝试删除一些dom结构，再试试，类似淘宝首页，滚动到底部再加载dom,又或者十万行无限滚动表格，那个实现思路，emmm，我也描述不清楚，我觉得你的问题应该就是dom太多的原因，导致卡顿吧。如果不是，我也不太清楚了，另外 我不是这个问题的发起者哦，你看看是不是搞错啦？

好的，那我先看看