当前位置: 首页 > Web前端 > CSS

iphone 软键盘弹起,禁止页面整体往上滚动

时间:2023-03-31 00:50:27 CSS

iphone软键盘弹出,禁止页面整体下部向上滚动。首先,经过反复调试,发现两条重要线索:1.首先,找到弹出键盘时页面上会发生变化的值:测试全文高度、可见区域高度、文档显示高度、滚动-upheightwhenthesoftkeyboardpopupupheight这些值是否有变化(iphone5真机测试320*568)。scrollHeight:504UnchangedoffsetHeight:504UnchangedclientHeight:504UnchangedinnerHeight:206ChangedscrollTop:298Changed改变的值包括文档显示高度innerHeight和scrollTop高度2.找到一个线索,当输入框在页面中的位置时高于键盘高度,软键盘弹出,不会导致页面向上滚动。于是我就这样想了,当键盘弹出的时候,先手动让输入框弹出,然后页面不滚动,然后把页面的高度变短,让输入框落到页面底部。具体方法://1.输入框获取焦点,判断是否为IOS。如果是,将input的bottom值设置为文档的高度,让input先飞上天。//2.因为之前测试过,页面滚动了,此时window.innerHeight会发生变化,所以当键盘弹出时(设置100ms),//动态将body.height改为window.innerHeight,缩短body的高度为文档区域的高度,//然后设置input的bottom为0,这样视觉上就达到了效果。handleFocus(){if(isIOS()){this.$refs.botFooter.style.bottom=window.innerHeight+'px'setTimeout(()=>this.reset(),100)}},reset(){document.body.style.height=window.innerHeight+'px'this.$refs.botFooter.style.bottom=0}我做的项目嵌套在app中,亲测有效,项目有已推出。app中的浏览器并没有在ios自带的浏览器底部出现左右翻页的菜单栏,所以可能是ios自带的浏览器有问题。