小编Jos*_*ley的帖子

iOS Safari:防止(或控制)在输入焦点上滚动

关于这个问题有很多(但不完全是)古老的问题,但由于我找不到任何现代的问题,我想我会再次问,希望得到一个现代的答案。

我正在开发一个业余爱好者响应式网络应用程序,但我在 iOS 上的输入焦点方面遇到了问题。我希望输入滚动到焦点上的 iOS 键盘上方(或不滚动),但无论如何,iOS 都希望将该控件居中。

在附加的 GIF 中,您可以看到我所看到的行为,然后我在末尾滚动以指示焦点事件触发后我希望发生的情况。

滚动行为

我发现这样的事情有效,但我想要更好的东西:以下代码有效,但在 GIF 中看到的滚动和窗口返回到我想要的位置之间有明显的延迟。另外,如果我将setTimeout()时间调整到~400以下,它就不起作用。iOS 在焦点滚动碰撞期间是否有一些阻塞?

element.addEventListener('focus', (e) => { setTimeout(() => { window.scroll(0,0) }, 500) });
Run Code Online (Sandbox Code Playgroud)

 

更新#1

到目前为止,我尝试过的唯一有效的解决方案是以下内容,感觉相当简陋(其中在和侦听器scrollLock中的其他地方定义):focusblur

document.addEventListener('scroll', (e) => {
    if (scrollLock && document.documentElement.scrollTop > 100) {
        document.documentElement.scrollTop = 100;
    }
});
Run Code Online (Sandbox Code Playgroud)

preventDefault()所有涉及或调用的解决方案window.scroll都没有阻止上图所示的滚动,而是主动监视滚动并迫使其返回到我希望它起作用的位置。然而,希望这不是答案!

javascript css mobile-safari ios

16
推荐指数
1
解决办法
2万
查看次数

标签 统计

css ×1

ios ×1

javascript ×1

mobile-safari ×1