开发过程中遇到,在IE浏览器,鼠标滚动向下滑动时,设置为position:fixed的div会出现短暂的向下瞬间移动之后马上跳回到最顶部,网上资料表明是position:fixed不兼容某些浏览器的缘故,解决方法有多种:
- 给这个设置了position:fixed的元素再设置一个CSS属性:
-webkit-transform: translateZ(0); - 给html, body元素设置CSS属性:
{height:100%;overflow:auto;margin: 0;} - 引入jquery1.7.2的类库,
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> - 在fiexd内设置position:absolute,如:
 <div style="position:fiexd;bottom:0px;">
  <div style="position:absolute;">
  </div>
</div>
但是以上办法对于我遇到的问题都毫无作用,有使用Javascript阻止需要兼容浏览器的默认滚动,用 window.scrollTo() 去模拟默认滚动,代码如下:
if(当前浏览器是IE浏览器){
document.body.addEventListener && document.body.addEventListener("mousewheel", function () {
event.preventDefault();
var wd = event['wheelDelta'];
var csp = window.pageYOffset;
window.scrollTo(0, csp - wd);
},{ passive: true });
}
为什么要判断在IE浏览器下才执行以上代码呢?因为在谷歌浏览器中,监听touch类事件报错:无法被动侦听事件preventDefault,是新版本chrome 浏览器报错。
原因:google浏览器为了最快速的相应touch事件,做出的改变。 历史:当浏览器首先对默认的事件进行响应的时候,要检查一下是否进行了默认事件的取消。这样就在响应滑动操作之前有那么一丝丝的耽误时间。 现在:google就决定默认取消了对这个事件的检查,默认时间就取消了。直接执行滑动操作。这样就更加的顺滑了。 但是浏览器的控制台就会进行错误提醒了。
另外,使用该办法,会导致系统内其余的滚动条无法随着鼠标滚动下滑,只能点击拉动滚动条下滑。所以,我们需要寻找其他的办法。
我在最后的问题排查中,发现z-index: -1居然是造成图片抖动的罪魁祸首,把他调高,图片就恢复了正常,至于什么原因导致的呢?还在调查中。