如果不是 body 元素，Android 无法正确滚动输入焦点 [英] Android does not correctly scroll on input focus if not body element

查看：21 发布时间：2021/12/21 18:09:29 android google-chrome input scroll focus

本文介绍了如果不是 body 元素，Android 无法正确滚动输入焦点的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

当移动浏览器调出键盘时，它会尝试移动滚动条，以便输入仍在视图中.

在 iOS Safari 上，它似乎通过找到最近的滚动父级来正确执行此操作.

在 Android 原生或 Chrome 移动浏览器上，它似乎只是尝试使用 body 元素然后放弃，因此焦点输入隐藏在键盘下方.

如何破解

在 body 元素上设置 overflow-y: hidden.创建一个可滚动的容器并在其中放置一个表单.

当您选择屏幕底部附近的元素时，它会被键盘遮挡.

演示

http://dominictobias.com/android-scroll-bug/

<头><元名称=视口"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/><title>Android 滚动/焦点错误</title><风格>html，正文{边距:0；填充:0；高度:100%；溢出:隐藏；}.滚动{位置:绝对；顶部:0；右:0；底部:0；左:0；溢出-y:滚动；}输入 {底边距:20px；宽度:100%；}</风格><身体><div class="scroll"><输入类型=文本"值=输入1"><输入类型=文本"值=输入 2"><输入类型=文本"值=输入 3"><输入类型=文本"值=输入 4"><输入类型=文本"值=输入 5"><输入类型=文本"值=输入 6"><输入类型=文本"值=输入7"><输入类型=文本"值=输入8"><输入类型=文本"值=输入 9"><输入类型=文本"值=输入 10"><输入类型=文本"值=输入 11"><输入类型=文本"值=输入 12"><输入类型=文本"值=输入 13"><输入类型=文本"值=输入 14"><输入类型=文本"值=输入 15"><输入类型=文本"值=输入 16"><输入类型=文本"值=输入 17"><输入类型=文本"值=输入 18"><输入类型=文本"值=输入 19"><输入类型=文本"值=输入 20">

任何想法如何解决这个问题?它是否需要一些浏览器检测和杂乱的黑客攻击?

解决方案

这是 Android 原生浏览器中的一个错误.顺便说一句，在软键盘上输入一个字符后，输入会滚动到视图中.

放置在页面某处的以下代码片段应该会有所帮助:

if(/Android 4.[0-3]/.test(navigator.appVersion)){window.addEventListener("resize", function(){if(document.activeElement.tagName=="输入"){window.setTimeout(function(){document.activeElement.scrollIntoViewIfNeeded();},0);}})}

When a mobile browser brings up a keyboard it tries to move the scrollbars so that the input is still in view.

On iOS Safari it seems to do this properly by finding the nearest scrolling parent.

On Android native or Chrome mobile browser it seems to just try the body element and then gives up, so the focused input is hidden beneath the keyboard.

How to break it

Set overflow-y: hidden on the body element. Create a scrollable container and put a form in there.

When you select an element near the bottom of your screen it will be obscured by the keyboard.

Demo

http://dominictobias.com/android-scroll-bug/

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>Android scroll/focus bug</title>
    <style>
    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
    }
    .scroll {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow-y: scroll;
    }
    input {
        margin-bottom: 20px;
        width: 100%;
    }
    </style>
</head>
<body>

    <div class="scroll">
        <input type="text" value="Input 1">
        <input type="text" value="Input 2">
        <input type="text" value="Input 3">
        <input type="text" value="Input 4">
        <input type="text" value="Input 5">
        <input type="text" value="Input 6">
        <input type="text" value="Input 7">
        <input type="text" value="Input 8">
        <input type="text" value="Input 9">
        <input type="text" value="Input 10">
        <input type="text" value="Input 11">
        <input type="text" value="Input 12">
        <input type="text" value="Input 13">
        <input type="text" value="Input 14">
        <input type="text" value="Input 15">
        <input type="text" value="Input 16">
        <input type="text" value="Input 17">
        <input type="text" value="Input 18">
        <input type="text" value="Input 19">
        <input type="text" value="Input 20">
    </div>

</body>
</html>

Any ideas how to fix this? Will it require some browser detection and messy hacks?

解决方案

This is a bug in the Android native browser. By the way, the input scrolls into the view after a character is typed on the soft keyboard.

The following code snippet placed somewhere in the page should help:

if(/Android 4.[0-3]/.test(navigator.appVersion)){
   window.addEventListener("resize", function(){
      if(document.activeElement.tagName=="INPUT"){
         window.setTimeout(function(){
            document.activeElement.scrollIntoViewIfNeeded();
         },0);
      }
   })
}

这篇关于如果不是 body 元素，Android 无法正确滚动输入焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如果不是 body 元素，Android 无法正确滚动输入焦点 [英] Android does not correctly scroll on input focus if not body element

问题描述

如何破解

演示

How to break it

Demo

相关文章

移动开发最新文章

热门教程

热门工具

登录关闭

如果不是 body 元素，Android 无法正确滚动输入焦点 [英] Android does not correctly scroll on input focus if not body element

问题描述

如何破解

演示

How to break it

Demo

相关文章

移动开发最新文章

热门教程

热门工具

登录 关闭

登录关闭