fix: popup strict prevent default to fix with IOS12 #5738
Conversation
Codecov ReportBase: 89.91% // Head: 89.60% // Decreases project coverage by
Additional details and impacted files@@ Coverage Diff @@
## master #5738 +/- ##
==========================================
- Coverage 89.91% 89.60% -0.32%
==========================================
Files 297 297
Lines 6339 6370 +31
Branches 1554 1562 +8
==========================================
+ Hits 5700 5708 +8
- Misses 590 609 +19
- Partials 49 53 +4
Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here. ☔ View full report at Codecov. |
|
PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-5738.surge.sh |
|
Size Change: +193 B (0%) Total Size: 350 kB
ℹ️ View Unchanged
|
| @@ -11,3 +11,28 @@ export function devError(component: string, message: string) { | |||
| console.error(`[antd-mobile: ${component}] ${message}`) | |||
| } | |||
| } | |||
|
|
|||
| let infoBox: HTMLTextAreaElement | |||
| export function devPrint(...message: any[]) { | |||
There was a problem hiding this comment.
嗯，这个工具方法用来在真机上调试数据。没有办法审查元素，就折中一下~
| @@ -43,7 +43,7 @@ export const Popup: FC<PopupProps> = p => { | |||
| }, [props.visible]) | |||
|
|
|||
| const ref = useRef<HTMLDivElement>(null) | |||
| useLockScroll(ref, props.disableBodyScroll && active) | |||
| useLockScroll(ref, props.disableBodyScroll && active ? 'strict' : false) | |||
There was a problem hiding this comment.
这样改了之后，如果 Popup 里面存在滚动区域，是不是也会被禁止……？
There was a problem hiding this comment.
这样改了之后，如果 Popup 里面存在滚动区域，是不是也会被禁止……？
Updated. 在 useLockScroll 里添加了滚动检查~
There was a problem hiding this comment.
还有一个 case……如果有一个可以滚动的 div，然后 Popup 渲染在了这个 div 里面（ getContainer 为 null ），这种情况下会触发 div 的滚动么
There was a problem hiding this comment.
这个检测逻辑只看点击的实际元素是什么，只要这个点击元素上层有可以滚动的且不是 body 就允许滚动。
IOS 12 下横向滚动后再垂直滚动会被认为是合理的滚动方向（标准为初次滚动一个方向后就会被锁定，而非可以混合滚动），导致在开始
touchmove没有调用preventDefault就会出现后期无法阻止滚动导致 Popup 锁不住屏幕滚动的问题。添加一个
strict模式，使用后直接锁定而不关心方向性。不确定是否保险，请多关注一下。