Android chrmoe position is fixed
2023-04-23 本文已影响0人
Poppy11
问题:我的项目使用了antd-mobile 的Popup + SearchBar组件组合,当在Android Chrome浏览器中,我点击SearchBar时,键盘会遮挡住Popup.
mobile.jpeg这是BUG图,打开键盘我已经看不到Popup的列表了。
chromedebug.png这是我使用Chrmoe浏览器电脑版调试,发现外部滚动条可以拖动到最下方,当外部滚动条拖动到最下方时,键盘也就不会遮挡内容了。
在这里顺便讲一下如何在电脑使用Chrmoe浏览器调试手机端的浏览器。
- 手机电脑保持同一网络
- 手机连接电脑,开启开发者模式
- 访问chrome://inspect/#devices
-
点击Inspect , need climb wall
image.png
然后最后解决方案是, 每次点击searchInput的时候,我们找到popup节点,并且让滚动到可视区域
<SearchBar
onFocus={() => {
setTimeout(() => {
document.getElementsByClassName('adm-popup')[0].scrollIntoView();
}, 100);
}}
/>;