移动开发问题总结

作者: 分类: js 时间: 2018-12-27 评论: 暂无评论

1.情景:两个滚动层叠在一起,底层随着顶层滚动(滚动穿透)
方案:在底层可以滚动的层上加fixed

$("body").css({"position": "fixed",width:'100%'});

2.情景:fixed层input光标定位不准 或 input没有在可视区域。
方案:禁止底层的滚动,遮罩层禁止

$('.bg-opacity').on('touchmove',function(e){
        e.stopPropagation();
        e.preventDefault();
});

// 苹果uc浏览器 position: fixed;处理
var ua = navigator.userAgent.toLowerCase();
if (/iphone|ipad|ipod/.test(ua)) {
     $('#login-box input').bind('focus', function () {
        var h = $(window).height()-100;
        $("底部滚动层").css({"overflow": "hidden", "height": h + "px"});
     });
     $('#login-box input').bind('blur', function () {
        $("底部滚动层").css({"overflow": "auto", "height": "auto"});
     });
}

3.情景:fiexd里含有input,当输入法弹起,head定位不准,往下偏移。(UC浏览器下导航栏收起)
方案:修改浮动层,body层定位为absolute,键盘收起后还原

$('#login-box input').bind('focus', function () {
    $('header,#login-box').css({
        'position': 'absolute'
    });
    $('#section-footer').css({
        'position': 'absolute'
    });

    $('html').css({
        'position': 'relative'
    });
});
$('#login-box input').bind('blur', function () {
    $('header,#login-box').css({
        'position': 'fixed'
    });
    $('#section-footer').css({//由于有些设备直接fixed定位会从键盘的位置掉到底部的动作,所以先隐藏再显示;
        'position': 'fixed',
        'bottom':'0',
        'display':'none'
    });

    setTimeout(function(){
        $('#section-footer').fadeIn();
    },500);
    $('html').css({
        'position': 'static'
    });
});

附:https://segmentfault.com/a/1190000000515816?_ea=1271747

标签: none

订阅本站(RSS)