IE浏览器设置position:fixed抖动问题

开发过程中遇到，在IE浏览器，鼠标滚动向下滑动时，设置为position:fixed的div会出现短暂的向下瞬间移动之后马上跳回到最顶部，网上资料表明是position:fixed不兼容某些浏览器的缘故，解决方法有多种：

1. 给这个设置了position:fixed的元素再设置一个CSS属性：-webkit-transform: translateZ(0);
2. 给html, body元素设置CSS属性：{height:100%;overflow:auto;margin: 0;}
3. 引入jquery1.7.2的类库，<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
4. 在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 浏览器报错。

谷歌.png

原因：google浏览器为了最快速的相应touch事件，做出的改变。
历史：当浏览器首先对默认的事件进行响应的时候，要检查一下是否进行了默认事件的取消。这样就在响应滑动操作之前有那么一丝丝的耽误时间。
现在：google就决定默认取消了对这个事件的检查，默认时间就取消了。直接执行滑动操作。这样就更加的顺滑了。
但是浏览器的控制台就会进行错误提醒了。

另外，使用该办法，会导致系统内其余的滚动条无法随着鼠标滚动下滑，只能点击拉动滚动条下滑。所以，我们需要寻找其他的办法。

我在最后的问题排查中，发现z-index: -1居然是造成图片抖动的罪魁祸首，把他调高，图片就恢复了正常，至于什么原因导致的呢？还在调查中。