ios page overflow:scroll; slow scroll and mobile web page, soft keyboard pop-up, input box is obscured

Posted by AnAmericanGunner on Wed, 17 Jul 2019 00:56:47 +0200

In mobile web development, you will find that when you set an overflow:sroll attribute to an element, when you slide the page on the ios side, the response of page scroll is very slow, there is a kind of Katon feeling, but it scrolls very fast on the Android side, so some people think of using iscroll.js plug-in, so that there is overflow:scroll attribute in the page; Elements scroll smoothly on both the ios and Android sides. Yes, this can solve the problem. Elements scroll smoothly, but iscroll.js also has many problems. For example, he masks many clicks and input box input problems on the page, and so on. Of course, all these can be solved, but there are many disadvantages. So there's - webkit-overflow-scrolling:touch; attributes to solve the ios side with overflow:sroll; elements of attributes to make it scroll smoothly. Remember, - webkit-overflow-scrolling:touch; attributes should be written in the style of elements with overflow:sroll; attributes.

Code:
.absolutewrapper{position:absolute;left:0;right:0;top:0;bottom:0;}
.absolutewrapperslide{position:absolute;left:0;right:0;top:0;bottom:55px;overflow:scroll;-webkit-overflow-scrolling : touch;}

Sometimes a div in the page writes him a fixed height and overflow:scroll; attributes, and there are many input boxes in the Div. When I click on an input, the soft keyboard pops up, and the input box does not automatically top the Android terminal. Then the test will give you a bug, which is very troublesome. So, I wrote my own way to let Android's input box automatically top up, because Android has this situation, so I made a terminal judgment, the following code for reference only:

<script>
    $(function(){
        //Judgment access terminal
        var browser={
            versions:function(){
                var u = navigator.userAgent, app = navigator.appVersion;
                return {
                    trident: u.indexOf('Trident') > -1, //IE Kernel
                    presto: u.indexOf('Presto') > -1, //opera kernel
                    webKit: u.indexOf('AppleWebKit') > -1, //Apple, Google Kernel
                    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//Gecko
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/), //Is it a mobile terminal?
                    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios terminal
                    android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android terminal
                    iPhone: u.indexOf('iPhone') > -1 , //Is it an iPhone or QQHD browser?
                    iPad: u.indexOf('iPad') > -1, //Is it an iPad?
                    webApp: u.indexOf('Safari') == -1, //Whether or not the web should be programmed without headers and bottoms
                    weixin: u.indexOf('MicroMessenger') > -1, //Wechat (added from January to 22, 2015)
                    qq: u.match(/\sQQ/i) == " qq" //QQ
                };
            }(),
            language:(navigator.browserLanguage || navigator.language).toLowerCase()
        };
        function pso(_this){
            var _top = parseInt($(_this).offset().top);//This_top refers to the top distance of the current target element relative to the current window.
            var scrol = $(".absolutewrapperslide").scrollTop();
            $(".absolutewrapperslide").scrollTop(scrol+_top-100);//This 100 is self-determined, and the final function is how far the input of the target is from the top of the viewport when the soft keyboard pops up, so that the input automatically goes up. You can customize this value according to your visual perception, as long as the input box can not be obscured by the soft keyboard in almost all mobile phones.
        }
        if(browser.versions.android){//If it's an Android phone, it performs this function.
            $("input").on("focusin",function(event){
                var _this = this;
                $(window).resize(function(){//When the input box is clicked, the viewport height changes, and the soft keyboard pops up. At this time, the pso() function is called to let the input go to the top.
                    pso(_this);
                })
            })
        }
    })
</script>

Topics: Javascript Android Mobile iOS Attribute