若是绝对定位的元素在最下面,键盘弹起时,绝对定位元素会在键盘上面html
解决办法:web
export function adapterPosition(selector) {
if (/iphone/i.test(navigator.userAgent)) return
const h = window.innerHeight;
const dom = document.querySelector(selector)
if (!dom) return
const display = dom.style.display
window.addEventListener('resize', () => {
const height = window.innerHeight
if (height < h) {
dom.style.display = 'none'
} else {
dom.style.display = display
}
});
}
复制代码
具体缘由待查,反正须要给input加一个display:block浏览器
<div class="item">
<div class="name">验证码</div>
<input class="jInput input" type="number" pattern="[0-9]*" placeholder="请输入短信验证码">
<button class="btn jSendVcodeBtn">
发送验证码
</button>
</div>
复制代码
.item {
margin-left: 15px;
box-sizing: border-box;
height: 60px;
padding: 12px 15px 12px 0;
overflow: hidden;
background-color: #fff;
color: #212121;
position: relative;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
border-bottom: 1px solid #f4f4f4;
font-size: 16px;
}
.item .name {
margin-right: 10px;
min-width: 48px;
}
.item .input {
display: block; // 须要加一个display:block
outline: 0 none;
-webkit-box-flex: 1;
flex: 1;
font-size: 16px;
padding: 0;
border-width: 0;
box-shadow: none;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
复制代码
关于relative元素top属性失效的缘由,父元素没有设置高度,子元素top使用百分比的时候没有参照,此时能够使用px值bash
描述:有场景须要mask,可是背景仍是能够滚动,即滚动穿透,解决方案以下,主要是获取页面的滚动元素并设置其为fixeddom
body.no-scroll {
position: fixed;
width: 100%;
}
复制代码
UtilFn.ModalHelper = function (bodyCls) {
var scrollTop;
var scrollingElement = document.scrollingElement || document.body; // 此写法兼容webkit,获取页面滚动元素
return {
afterOpen: function () {
scrollTop = scrollingElement.scrollTop;
document.body.classList.add(bodyCls);
document.body.style.top = -scrollTop + 'px';
},
beforeClose: function () {
document.body.classList.remove(bodyCls);
scrollingElement.scrollTop = scrollTop;
}
};
}
复制代码
参考 web.jobbole.com/84113/iphone
浏览器会对小数点进行四舍五入,实际渲染是四舍五入以后的,可是真实占用空间是原始大小,四舍五入的那部分值会影响下一个布局