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
feat: add ScrollLocker #179
Conversation
会用到哪些组件里? |
|
Line 5 in 37aacd6
|
差不多,但是这个 |
试试 strict 模式。#174 |
strict 应该不会影响,这个可以等到上层组件的时候加下看看 |
src/switchScrollingEffect.js
Outdated
document.body.className = addClassName.trim(); | ||
} | ||
} | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
看看这个文件有没有被 antd 和 rc-*** 依赖到。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
没有,但是这个改造完要发 marjor,不然 rc-drawer 和 rc-dialog 别人重装会出问题
npm 和 GitHub 都给你加了权限,自行推进吧。 另外如果升大版本,所有 rc 都要升一遍。 |
👌,那 |
this.scrollLocker = new ScrollLocker({ | ||
container: getParent(props.getContainer) as HTMLElement, | ||
}); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
switchScrollingEffect 里的 overflow 相关代码是不是应该清理掉。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
另外,这里的滚动条是否出现是依赖 openCount 的。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
switchScrollingEffect 里的 overflow 相关代码是不是应该清理掉。
switchScrollingEffect
不能动,动了算是 breaking 了,要改的东西有点多,现在这种是多了个 scrollLocker 方法供上层用
这里的滚动条是否出现是依赖 openCount 的。
不依赖 openCount
,openCount 并不是 effectCount,我现在的做法是给类似观察者,每一个 dialog 都有个属于自己的 scrollLocker
,你想要锁定或者解锁都只要根据自己的业务逻辑来就行,Dialog 那边比较简单,显示就 lock,隐藏就 unLock,Drawer 有逻辑判断,并不是所有的显示都会 lock,这时候就比较好用了,还没改到 Drawer,预计问题不大,就是 Drawer 的代码有点乱,比较多的 dom 操作
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Drawer 是依赖的,多层抽屉只有关掉所有才会 unLock。
https://ant.design/components/drawer-cn/#components-drawer-demo-multi-level-drawer 这个之前是好的,后来某个版本给改挂了。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
嗯,现在改成不依赖了,多层抽屉就是多个 Dialog,�底层都是用的这个 portal,改挂了算是意料之中,因为 openCount
所有由 portal 创建弹层的共享,我打开一个 Modal
再打开一个 Drawer
也会出问题
import switchScrollingEffect from './switchScrollingEffect'; | ||
import setStyle from './setStyle'; | ||
import canUseDom from './Dom/canUseDom'; | ||
import ScrollLocker from './Dom/scrollLocker'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
等都迁移了就可以把上面的 switchScrollingEffect
删了
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
不能删,老的 antd 版本会挂。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
antd 3 么还是
你们干了什么??咋就突然挂了??? |
要不把 modal 和 drawer 重构成一个组件,,感觉两玩意是一个东西,,就样式不一样。。。 |
不知道,老的 |
openCount 不就是 PortalWrapper 里的一个值,,关闭和 willUnmount 时清掉不就行了?? scrollLocker 需要改造下,,不能禁 document touchmove,问题我在 drawer 里说了。。 |
我感觉你在走我的老路。。。这个滚禁只能手动去禁,滑动这玩意全部在 document 执行的,所以条件是这样,,如果是drawer 里的元素,且元素内部不出现滚动条或不在滚动范围内才使用 preventDefault,, |
那换成 document.body 就行了吧 |
我记得好像也不行。不过你可以试试。。 |
body 层拦掉了,,都到不了 document ,,不一样的吗?? |
内容里的滚动也需要 document 的 move 来触发的。。 |
你要不把 Portal 这块东西重构下,,,modal 和 drawer 两组件只管内容样式层的东西。。 |
重构挺费时间的,一时半会忙不完,而且线上有问题了,不能再等了,我先删除 |
No description provided.