Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

-webkit-overflow-scrolling touch 在IOS下滚动更流畅 #1

Open
Maxxxz opened this issue Aug 8, 2017 · 0 comments
Open

-webkit-overflow-scrolling touch 在IOS下滚动更流畅 #1

Maxxxz opened this issue Aug 8, 2017 · 0 comments
Labels
IOS compatibility mobile

Comments

@Maxxxz
Copy link
Owner

Maxxxz commented Aug 8, 2017

两个重要参数说明
`
touch; /* 当手指从触摸屏上移开,会保持一段时间的滚动 */

auto; /* 当手指从触摸屏上移开,滚动会立即停止 */
`

一. 卡顿:在使用下面这个样式做滚动的时候,IOS8的手机部分页面一直滚动失效(但是部分页面一样的样式确实可以滚的)。

二. webkit-overflow-scrolling点透:
一般存在于父级滚动,子级touchmove 的时候,带动了父级的滚动,
或者堂兄弟之间只要层级重叠就会穿透。
解决方案:

  1. 兄弟级别或者堂兄弟级别去滚动,但是这样在部分浏览器上还是会造成穿透
  2. 直接在不需要滚动的地方组织默认事件(e.preventDefault());
  3. 使用iscroll或者swiper实现滚动
  4. 在不需要滚动的下面加一个透明的滚动父级,然后每次每次touchmove的时候重置父级滚动距离为 0
@Maxxxz Maxxxz changed the title test -webkit-overflow-scrolling touch 在IOS下滚动更流畅 Apr 20, 2018
@Maxxxz Maxxxz added IOS compatibility mobile labels Apr 20, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
IOS compatibility mobile
Projects
None yet
Development

No branches or pull requests

1 participant