最近在写的一个小项目中遇到一个深坑，就是在ios的Safari浏览器中，使用fixed定位的元素会失效。

比如如下代码body {

margin: 0;

}

.container {

width: 100%;

height: 1000px;

background-color: seagreen;

}

.overlay {

position: fixed;

width: 500px;

height: 300px;

left: 0;

right: 0;

top: 50%;

margin-top: -150px;

margin-left: auto;

margin-right: auto;

background-color: #ccc;

z-index: 99999;

}

.overlay h1 {

text-align: center;

}

.mask {

position: fixed;

top: 0;

right: 0;

left: 0;

bottom: 0;

background-color: rgba(0,0,0,.8);

}

overlay

当input输入框获取焦点后，此时fixed就不起作用，可以近似的把当前的这个bug效果当做absolute显示，因为页面可以上下滑动，但是overlay和mask却不是固定不动的，而且mask此时也只有一屏的高度，当向上或向下滑动时，也就是说没有mask遮罩层。

那么有什么好的解决办法呢？

查询得知，在html和body上添加如下代码，即可解决这一问题html,body{

-webkit-overflow-scrolling : touch !important;

overflow: auto !important;

height: 100% !important;

}

在此，感谢一下大师 时鹏亮 给予的帮助！

.03.15

经过测试发现，使用了html{height:100%}将会导致在移动端无法获取document.documentElement.scrollTop的值，这是另外一个坑，目前还没有找到好解决办法！我在获取之前是先重置一下html的高度，这样可以获取到，但是这种方法肯定不够好，有可能会带来其它新的问题！

如果觉得我的文章对您有用，请您随意打赏。您的支持将鼓励我更加努力创作！

打赏支持