当前位置 博文首页 > RunningOnMyWay的博客:iscroll4 滚动内容溢出屏幕问题

    RunningOnMyWay的博客:iscroll4 滚动内容溢出屏幕问题

    作者:[db:作者] 时间:2021-06-10 09:16

    使用iscroll4 解决了可编辑元素的focus问题,也解决了滚动条刷新需要加一定的延时等待html数据加载完成问题,但是遇到了一个由于移动端的软件盘弹出后影响了页面布局,导致滚动内容溢出到可见窗体之外,尤其是在聚焦状态下滚动时极易发生该种情况
    目前遇到问题的wrapper使用的绝对定位
    加入一个监控窗口大小变化时的监听,参考自针对移动端键盘弹起页面布局样式改变问题

    var winHeight = $(window).height(); //获取当前页面高度
    			$(window).resize(function(){
    				console.log("窗口大小变化")
    				//当窗体大小变化时
    		        var thisHeight = $(this).height();  //窗体变化后的高度
    		        if (winHeight - thisHeight > 50) {  
                        console.log("-1--");
                        //变化时改为相对定位
                        $("#wrapper").css("position","relative");
    		        } else {   
                        console.log("-2--");
                        //恢复后改为绝对定位
                        $("#wrapper").css("position","absolute");
                        myscroll.refresh();
    		        }  
    			})
    

    但是当前的话只是解决了一半,仍然会出现滚动消失问题,为了避免聚焦状态下滚动发生问题,在touchmove即滚动条滚动时

    onScrollMove: function () { //拉动时
                    //上拉加载
                    document.activeElement.blur();
                    //。。。。其他代码省略
                    }
    

    即修改后,在滚动时去掉已聚焦元素的聚焦状态;当然这样仍然有情况是按住文本域滚动时不会触发onScrollMove,但是在聚焦状态接触后会恢复正常
    当然这不是一个好的解决办法,如果各位xd有好的办法的话,还请教教我这个小白,万分感谢。

    下一篇:没有了