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

fix:disableScroll属性为false时还原css #436

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/rax-scrollview/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "rax-scrollview",
"version": "3.7.1",
"version": "3.7.2",
"description": "ScrollView component for Rax.",
"license": "BSD-3-Clause",
"main": "lib/index.js",
Expand Down
10 changes: 3 additions & 7 deletions packages/rax-scrollview/src/web/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -247,16 +247,12 @@ const ScrollView: ForwardRefExoticComponent<ScrollViewProps> = forwardRef(
}

scrollerStyle.WebkitOverflowScrolling = 'touch';
if (horizontal) {
scrollerStyle.overflowX = 'scroll';
scrollerStyle.overflowY = 'hidden';
} else {
scrollerStyle.overflowX = 'hidden';
scrollerStyle.overflowY = 'scroll';
}

if (disableScroll) {
scrollerStyle.overflow = 'hidden';
} else {
scrollerStyle.overflowX = horizontal ? 'scroll' : 'hidden';
scrollerStyle.overflowY = horizontal ? 'hidden' : 'scroll';
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里逻辑有覆盖问题吧,上面设置的 overflowX/overflowY 都会被覆盖掉

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

已修改

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个覆盖关系还是有问题吧,disableScroll 没生效了吧

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

嗷嗷,刚开始嵌套这写的,我加上去

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我这边改完了啊,有时间看一下

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

复现场景:disableScroll先设置为true,再设置为false,不生效;
更改逻辑:原有代码缺少disableScroll为false的处理,因为直接加处理会覆盖horizontal,所以先判断disableScroll再判断horizontal

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

原有逻辑是:

首次设置 disableScroll=true 后,
scrollerStyle 的值为: {overflow:'hidden'}

再次设置 disableScroll=false 后,scrollerStyle 的值分两种场景

  • 如果 horizontal 为true 值为 {overflowX: 'scroll', overflowY:' hidden'}
  • 如果 horizontal 为false 值为 {overflowX: 'hidden', overflowY:'scroll'}

这个结果有什么问题吗?期望是怎么样的?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我这边看到了问题,我第二次重置为false,组件上并没有设置overflow,因为overflow的默认值是visible,所以滚动不生效了


const webProps = {
Expand Down