如果 bootstrap4 模态位于页面的低端，当点击模态内的输入字段时，它会滚动到底部(chrome android) [英] if bootstrap4 modals located low on the page, when tap on input field inside the modal, it scrolls to the bottom (chrome android)

查看：24
本文介绍了如果 bootstrap4 模态位于页面的低端，当点击模态内的输入字段时，它会滚动到底部(chrome android)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

请看看这个问题.我有完整的一页简单的 html 代码来重现它.有两种模式 - 一种在顶部，一种在页面下方.模态内的输入字段.如果您点击输入字段，它会滚动到最底部，这样我就看不到输入字段.此问题仅出现在底部模态，而不是顶部模态.在 ANDROID 上使用 CHROME

代码如下:

<!doctype html><html lang="zh-cn"><头><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no"><!-- Bootstrap CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcFAgWiGinAmAmFcFAGORIGINSIGINX"><title>你好，世界！</title><身体><h4>嘿</h4><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">打开模态<!-- 模态--><div class="modal" id="myModal1"><div class="modal-dialog"><div class="modal-content"><!-- 模态标题--><div class="modal-header"><h4 class="modal-title">模态标题</h4><button type="button" class="close" data-dismiss="modal">&times;</button>

<!-- 模态体--><div class="modal-body">模态体..<p>输入</p><输入类型=文本"><p>输入</p><输入类型=文本"><p>输入</p><输入类型=文本"><p>输入</p><输入类型=文本"><p>输入</p><输入类型=文本"><p>输入</p><输入类型=文本"><p>输入</p><输入类型=文本">

<!-- 模态页脚--><div class="modal-footer"><button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>

<div style="height:1000px;"></div><div style="height:1000px;"></div><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">打开模态<!-- 模态--><div class="modal" id="myModal2"><div class="modal-dialog"><div class="modal-content"><!-- 模态标题--><div class="modal-header"><h4 class="modal-title">模态标题</h4><button type="button" class="close" data-dismiss="modal">&times;</button>

<!-- 模态体--><div class="modal-body">模态体..<p>输入</p><输入类型=文本"><p>输入</p><输入类型=文本"><p>输入</p><输入类型=文本"><p>输入</p><输入类型=文本"><p>输入</p><输入类型=文本"><p>输入</p><输入类型=文本"><p>输入</p><输入类型=文本">

<!-- 模态页脚--><div class="modal-footer"><button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>

<!-- 可选的 JavaScript --><!-- 首先是 jQuery，然后是 Popper.js，然后是 Bootstrap JS --><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5Kkn"cross/脚本><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39jQxfakfakvskor匿名"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjPVCUar5"7s/脚本></html>

解决方案

我遇到了类似的问题，这就是我为我解决的问题(经过数小时的沮丧和大量的谷歌搜索......)

特别是我使用的是带有文本输入和焦点/点击输入字段的 bootstrap-vue 模态，Android chrome 会滚动到模态的底部，如果我向上滚动并输入它保持焦点但再次点击它会再次滚动回到同一位置.

这是有效的:

html,body{-webkit-overflow-scrolling : 触摸 !important;溢出:自动！重要；}

原文来源:https://stackoverflow.com/a/35675094/1625130

Please have a look at this issue. I have full one-page simple html code to reproduce it. There are two modals - one on top, and one lower on the page. Input fields inside the modals. If you tap on input field, it scrolls to the very bottom so that I cannot see the input field. This issue occurs only with the bottom modal, not the top one. Using CHROME on ANDROID

Here's the code:

  
<!doctype html>
<html lang="en">
<head>
	 
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <title>Hello, world!</title>
    
    
    
</head>

<body>
      <h4>Hey</h4>
    
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">
  Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal1">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
           <p>input</p>
        <input type="text">
          <p>input</p>
        <input type="text">
           <p>input</p>
        <input type="text">
           <p>input</p>
        <input type="text">
           <p>input</p>
        <input type="text">
           <p>input</p>
        <input type="text">
           <p>input</p>
        <input type="text">
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
    </div>
    <div style="height:1000px;"></div>
    <div style="height:1000px;"></div>
    
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">
  Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal2">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
        <p>input</p>
        <input type="text">
          <p>input</p>
        <input type="text">
           <p>input</p>
        <input type="text">
           <p>input</p>
        <input type="text">
           <p>input</p>
        <input type="text">
           <p>input</p>
        <input type="text">
           <p>input</p>
        <input type="text">
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
    </div>


    
    
     <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 
  </body>
</html>

解决方案

I had a similar issue and this is what fixed it for me (after hours of frustration and a lot of googling...)

Specifically I was using a bootstrap-vue modal with a text input and on focus/tap of the input field Android chrome would scroll to the bottom of the modal, if i scrolled back up and typed it stayed in focus but tapping again it would scroll again back to same spot.

Here's what worked:

html,body{
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
}

Original Credit to: https://stackoverflow.com/a/35675094/1625130

这篇关于如果 bootstrap4 模态位于页面的低端，当点击模态内的输入字段时，它会滚动到底部(chrome android)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆