iscroll4 滚动内容溢出屏幕问题

使用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有好的办法的话,还请教教我这个小白,万分感谢。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值