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

AtActionSheet在ios的webview上,会有滚动穿透的问题 #286

Closed
349989153 opened this issue Dec 26, 2018 · 11 comments
Closed

AtActionSheet在ios的webview上,会有滚动穿透的问题 #286

349989153 opened this issue Dec 26, 2018 · 11 comments
Assignees
Labels
bug Something isn't working

Comments

@349989153
Copy link

重现步骤

import Taro, { Component } from '@tarojs/taro';
import { View } from '@tarojs/components';
import { AtActionSheet, AtActionSheetItem } from 'taro-ui';

class TestPage extends Component{
  render() {
    return (
      <View
        style={{
          height: '2000px',
          background: 'linear-gradient(to bottom, red, blue)'
        }}
      >
        <AtActionSheet isOpened>
          <AtActionSheetItem>
            按钮一
          </AtActionSheetItem>
          <AtActionSheetItem>
            按钮二
          </AtActionSheetItem>
        </AtActionSheet>
      </View>
    )
  }
}

export default TestPage;

依赖的版本号

taro: 1.2.0-beta.6
taro-h5: 1.2.0-beta.7
taro-ui: 1.5.0
node: v10.2.1

预期结果

在ios的webview上,当AtActionSheet显示时,在AtActionSheet的遮罩区域用手指划动,不会造成遮罩覆盖的页面的滚动

实际结果

在ios的webview上,当AtActionSheet显示时,在AtActionSheet的遮罩区域用手指划动,发现遮罩覆盖的页面也会滚动。(在上面的代码中,会发现渐变色页面会滚动)

相关链接

@349989153
Copy link
Author

其他的带遮罩的组件可能也有此问题。

@SzHeJason
Copy link
Collaborator

组件上暂时没有好办法处理这个 滚动问题 建议监听事件 在使用组件的地方处理

@SzHeJason SzHeJason added the bug Something isn't working label Dec 26, 2018
@SzHeJason SzHeJason self-assigned this Dec 26, 2018
@349989153
Copy link
Author

349989153 commented Dec 26, 2018

该组件最外层的View上ontouchmove上加个e.preventDefault()就好,只是不知道加了之后会不会引起其他的bug

@SzHeJason
Copy link
Collaborator

@349989153 这个方法之前试过了 代码方面已经加了 e.stopPropagation() 了

@349989153
Copy link
Author

349989153 commented Dec 26, 2018

@SzHeJason 但只有e.stopPropagation()还是会有这个bug,加了e.preventDefault()才ok

@SzHeJason
Copy link
Collaborator

ok 我试试 非常感谢

@349989153
Copy link
Author

@SzHeJason 这样做果然会引起另一种问题:如果AtActionSheet里面有带滚动条的话,这个滚动条就无法滚动了。

可以看下https://github.com/pod4g/tool/wiki/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%BB%9A%E5%8A%A8%E7%A9%BF%E9%80%8F%E9%97%AE%E9%A2%98

sorry,当时并没有考虑这么细致,这个问题可能还要重新思考一下

@SzHeJason
Copy link
Collaborator

@349989153 新版本的好像已经改了 h5 没有通过 e.preventDefault() 你可以试试

@SzHeJason SzHeJason reopened this Mar 4, 2019
@349989153
Copy link
Author

349989153 commented Mar 5, 2019

@SzHeJason 这个问题麻烦的地方在于,加不加e.preventDefault(),都可能有问题。

想象下面一个场景:
page A页面上需要显示一个ActionSheet(或者FloatLayout)

1、onTouchMove上不加e.preventDefault() 的话,如果page A有滚动条,那么在ActionSheet上面的划动手势会穿透到page A,造成page A滚动。

2、onTouchMove上加了e.preventDefault() 的话,如果page A没有滚动条,而ActionSheet有滚动条,那么在ActionSheet上会无法滚动。

以上是我遇到的情况。

当然这两种情况我自己魔改代码都解决了(class ActionSheet extends AtActionSheet),只是在想有没有一个通用的完美的解决方法,因为如果遇到:page A有滚动条,ActionSheet也有滚动条,那么怎么改都有问题了。

@MengQingJunzz
Copy link

@349989153 我想问下我用的FloatLayout,内部也有滚动,如何阻止穿透 而且我的获取不到body scrollTop

@349989153
Copy link
Author

@MengQingJunzz 我是继承组件,然后魔改某个方法。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants