Tips to solve ios incompatibility of mobile terminal with css position:fixed Property, no plug-ins required

Fixed settings at the bottom of the head of app for mobile development position:fixed , Android 2.2 has been implemented. However, in IOS 8 and below systems, when the keypad is activated, the problem of position floating will occur. As shown in the figure:



How to solve:
After consulting the data, I think of several solutions
1. Use position: absolute simulation

    <script type="text/javascript">

        window.onscroll=function(){

        $(".fixed").css("top",$(window).scrollTop());

       $(".foot").css("top",$(window).scrollTop()+$(window).height());

    }

    </script>

Here's the problem: the div at the bottom of the head will vibrate obviously when sliding the page.
2. If the current focus element obtained is input, the hidden div will be changed to position: absolute

    <body onload=setInterval("a()",500)>
    <script type="text/javascript">

      function a(){

        if(document.activeElement.tagName == 'INPUT'){    

          $(".fixed").css({'position': 'absolute','top':'0'}); 

           } else {  

             $(".fixed").css('position', 'fixed');  

            }

          }

      </script>

Here comes the problem: constantly monitoring dom and consuming resources. If the number of inputs is small, it is better to add the onfocus event to the input. But if the bottom is fixed div, this method seems not very awesome.
3. Plug in iscroll.js I don't think it works very well. Maybe the method is wrong. jQuery Mobile didn't try. I feel it will increase the burden.
4. Here comes the focus:
Just add the css style to the outer div in the middle position:fixed;top:50px; bottom:50px;overflow:scroll; you can achieve the effect without plug-ins. You can copy the following code to run.

    <!DOCTYPE html>

    <html lang="zh_cmn">

    <head>

    <meta charset=utf-8 />

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

    <title></title>

    <style>

    .head,.foot{position:fixed;left:0;height:38px;line-height:38px;width:100%;background-color:#99CC00;}

    .head{top:0;}

    .foot{bottom:0;}

    .main{position:fixed;top:38px;bottom:38px;width:100%;overflow:scroll;background-color:#BABABA;}

    </style>

    </head>

    <body>

    <header class="head">Top fixed area</header>

    <article class="main"  id="wrapper">  

        <div>

         <p>When the content wants to be hidden, the gray area can be dragged up and down</p>

        <p>When the content wants to be hidden, the gray area can be dragged up and down</p>

         <p>When the content wants to be hidden, the gray area can be dragged up and down</p>

         <p>When the content wants to be hidden, the gray area can be dragged up and down</p>

         <p>When the content wants to be hidden, the gray area can be dragged up and down</p>

         <p>When the content wants to be hidden, the gray area can be dragged up and down</p>

         <p>When the content wants to be hidden, the gray area can be dragged up and down</p>

         <p>When the content wants to be hidden, the gray area can be dragged up and down</p>

         <p>When the content wants to be hidden, the gray area can be dragged up and down</p>

         <p>When the content wants to be hidden, the gray area can be dragged up and down</p>

         <p>When the content wants to be hidden, the gray area can be dragged up and down</p>

        <input type="text" value="" class="inputtext"> <br>

            <input type="text" value="" class="inputtext"> <br>

       <input type="text" value="" class="inputtext"> <br>

       <input type="text" value="" class="inputtext"> <br>

         <input type="text" value="" class="inputtext"> <br>

         <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

         <input type="text" value="" class="inputtext"> <br>

         <input type="text" value="" class="inputtext"> <br>

         <input type="text" value="" class="inputtext"> <br>

         <input type="text" value="" class="inputtext"> <br>

         <input type="text" value="" class="inputtext"> <br>

         <input type="text" value="" class="inputtext"> <br>

         <input type="text" value="" class="inputtext"> <br>

         <input type="text" value="" class="inputtext"> <br>

         <input type="text" value="" class="inputtext"> <br>

         <input type="text" value="" class="inputtext"> <br>

       <input type="text" value="" class="inputtext"> <br>

       <input type="text" value="" class="inputtext"> <br>

         <input type="text" value="" class="inputtext"> <br>

         <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

       <input type="text" value="" class="inputtext"> <br>

         <input type="text" value="" class="inputtext"> <br>

         <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

       <input type="text" value="" class="inputtext"> <br>

      <input type="text" value="" class="inputtext"> <br>

      <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

       <input type="text" value="" class="inputtext"> <br>

       <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

         <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

         content <br>

        content <br>

        content <br>

        content <br>

        content <br>

        content <br>

        content <br>

        content <br>

        content <br>

      </div>

    </article>

    <footer class="foot">Bottom fixed area</footer>

    </body>
    </html>

When the keypad appears, the head and bottom automatically jump to the top and bottom of the page. When the keyboard is hidden, it will be fixed at the head and the bottom. Suddenly I feel cheerful

Tags: Mobile Javascript Android iOS

Posted on Thu, 28 May 2020 08:01:37 -0700 by witold