手机端底部fixed定位当手机键盘弹起的时候底部被顶上去的问题

获取一个窗口宽度
resize() 当调整浏览器窗口的大小时,发生 resize 事件。

var winHeight = $(window).height();  //获取当前页面高度
		$(window).resize(function () {
			var thisHeight = $(this).height();
			if (winHeight - thisHeight > 140) {   //原窗口减去改变后的窗口>140就隐藏底部fixed内容。
				//键盘弹出
				$('.vip-verification-logo').css('display', 'none');
			} else {
				//键盘收起
				$('.vip-verification-logo').css({'display':'block',});

			}
		})
在React中,当底部有固定的`position: fixed`定位的按钮,并且需要处理键盘弹出遮挡内容的问题,可以采用以下几种非传统的方法来解决: 1. **利用JavaScript事件监听**: 监听设备的`resize`事件,检查窗口高度是否因为键盘弹出而改变。如果窗口高度减小,说明键盘弹起,这你可以调整按钮的位置,让它自动上移一定的距离,如减少窗口高度的一部分。 ```javascript componentDidMount() { window.addEventListener('resize', this.handleResize); } handleResize = () => { if (window.innerHeight < initialScreenHeight) { // 根据实际需求计算上下偏移量 const offset = Math.min(window.innerHeight - initialScreenHeight, buttonOffset); setButtonPosition({ top: initialBottomPosition - offset }); } else { setButtonPosition(initialButtonPosition); } } componentWillUnmount() { window.removeEventListener('resize', this.handleResize); } ``` 2. **使用第三方库**: 可以考虑使用像`react-keyboard-handler`这样的库来更方便地管理键盘状态,它会帮助你监听并响应键盘的显示和隐藏。 3. **利用CSS hack**: 如果你不想依赖于浏览器原生的事件,也可以通过一些CSS技巧来尝试,例如在body或viewport添加特定的CSS规则,针对键盘显示设置一个临的负margin-bottom给按钮。 然而,这种方法可能并不是所有环境的最佳实践,因为它可能会增加应用的复杂性和维护成本。现代的做法通常还是推荐使用官方支持的解决方案,比如在iOS上使用`keyboardAvoidingView`属性,在Android上监听`onWindowFocusChanged`事件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值