ios系统针对底部input设置fixed的输入框不兼容问题

最新推荐文章于 2023-08-01 18:10:11 发布

昆仑山单干户

最新推荐文章于 2023-08-01 18:10:11 发布

阅读量811

点赞数

本文链接：https://blog.youkuaiyun.com/qq_32601115/article/details/53158430

版权

本文讲述了在iOS系统中遇到底部input固定定位的兼容性问题，包括页面布局需求和解决方法。通过参考外部链接提供的方案解决了fixed定位问题，并指出滚动区域加载评论的特殊处理方式，以及评论后自动滚动至最新信息的技术要点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

标题：工作一年遇过的首个大坑—ios系统针对底部input设置fixed的输入框不兼容问题

页面要求如图
如图，要求底部输入框，评论加载
1、针对fixed不兼容可以使用下面方法：

// CSS
.scrollWrapper {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top:0;
}
bottomInput {
    position: absolute;
    bottom:0;
    left:0;
    right: 0;
}

// HTML
<body>
    <div class="scrollWrapper">
        <div class="bottomInput">
            <input type="text" placeholder="input"/>
        </div>
    </div>
</body>

// javascript
// 在输入框获取焦点, 键盘弹起后, 真的是一行代码
var interval = setInterval(function() {
    document.body.scrollTop = document.body.scrollHeight
}, 100)

参考链接https://segmentfault.com/a/1190000006243816

2、由于滚动区域设置了绝对定位，所以评论区域滚动加载不能使用检测页面是否显示到底部，只能判断滚动区域是否滚动到底部来实现加载

body:<div class="scrollWrapper " style="overflow-y:scroll;"></div>

JS:    $(document).ready(function (){
        var nScrollHight = 0;
        var nScrollTop = 0;
        var nDivHight = $("#gundong").height();
        $("#gundong").scroll(function(){
            nScrollHight = $(this)[0].scrollHeight;
            nScrollTop = $(this)[0].scrollTop;
            if(nScrollTop + nDivHight >= nScrollHight){
                setTimeout(function () {
                    $(".ss_com_main").append('加载成功');
                },1000);
            }
        });
    });

注意：滚动区域必须添加overflow-y:scroll;

3、需求：评论后自动显示到最新的一条信息

var a =$(".xrb_ss").height()+10;
$("#gundong").scrollTop(a);

获取显示位置的高度，使用scrollTop()方法来返回；