Css IE 10&；11使用鼠标滚轮滚动时使固定背景跳跃

当你在Windows8中用鼠标滚轮滚动时，固定的背景图像会疯狂地反弹。这只影响IE 10和IE 11。这也会影响位置为固定的元素。 以下是具有固定背景图像的示例：

下面是示例代码：

#section{
    position: fixed;
    top:0;
    left:0;
    background-color:#eee;
    background-position: top left;
    background-image: url("images/7.png");
    background-size: auto; 
    background-repeat: no-repeat;
    z-index: 10;
}

---

有没有办法让IE 10和11中的背景保持不变？

尝试关闭平滑滚动选项

Internet选项-高级选项卡-使用平滑滚动

这就像渲染bug一样。。。。MS IE团队正在调查……

这里有一个解决方法（在Windows 8.1上测试）：

将“背景”CSS属性移动到BODY元素。当前它位于id为“filler”的DIV元素上。以下是生成的CSS：

    body {
        font-family: Helvetica, Arial, sans-serif;
        background: #fff url(blue-kitty.jpg) no-repeat fixed center 100px;
    }

    #filler {
        text-align: center;
    }

    .big-margin {
        margin-top: 500px;
    }

---

只需将body容器定义为relative

<style>
    body
    {
        position: relative;
    }
</style>

身体
{
位置：相对位置；
}

这看起来像是z-index错误，请尝试添加z-index:1。

对此，我发现调试的最佳方法是：

在页面顶部创建一个简单的元素，例如

 <style>#test {position: fixed; background: red; top: 0; left: 0; width: 4em}</style>
 <div id="test">Test</div>

#测试{位置：固定；背景：红色；顶部：0；左侧：0；宽度：4em}
试验

在上述所有情况下，这都能正常工作，并且滚动平滑。所以这证明了它是可以做到的！现在，慢慢地将属性添加回，直到您能够使位置固定的元素在站点上下文中工作

然后，我发现向固定项添加z索引解决了这个问题。（例如z指数：1）

我还发现，一旦在子元素上设置了位置，bug就会从该点向下/向前显示它自己

因此您需要确保所有子元素都没有位置集，

---

或者，如果他们这样做，您可以明确地为每个孩子设置一个位置。

例如

美好的
邪恶的
酷
悲哀的
悲哀的
幸福的

---

它是可修复的，但需要一些调整

我知道现在回答有点晚，但我也遇到了同样的问题，通过将这些属性添加到我的css文件中，我能够解决这个问题

html{
    overflow: hidden;
    height: 100%;    
}
body{
    overflow: auto;
    height: 100%;
}

来自评论：

---

此解决方案可停止在窗口上触发滚动事件，因此如果您使用的是依赖于此类事件触发的任何东西，请务必小心。（溢出：隐藏，滚动事件不起作用）（溢出：自动，滚动事件开火）-丹·阿布雷

---

因此，这可能会导致项目中出现一些问题。但是我在IE中找不到解决这个问题的其他方法。

在我的例子中，修复方法是简单地从具有position:fixed的元素中删除z-index属性，IE然后停止奇怪的闪烁

---

（禁用IE选项上的平滑滚动在具有z-index属性时起作用，但这不是一个解决方案，因为默认情况下用户很可能会启用它）。

发现：固定元素中的固定元素会导致跳转问题。例如，将父元素的位置更改为绝对位置。Absolute大多数在没有任何其他更改的情况下工作，或者根据您的需要进行更改。对我来说，这种跳跃行为是由HTML元素上的

opacity:0.99

引起的（Mac上更粗体的字体的修复）。不幸的是，这个问题已经解决了。我也遇到了这个问题，在调查过程中，我发现了这个基于Javascript的解决方法：if（navigator.userAgent.match（/Trident\/7\./）{//if IE$（'body'）。on（“mouseweel”，function（）{//remove default behavior event.preventDefault（）；//不平滑滚动var wheeldta=event.wheeldta；var currentScrollPosition=window.pageYOffset；window.scrollTo（0，currentScrollPosition-wheeldta）；}我刚刚遇到一个例子，通过从与固定背景重叠的元素中删除

box shadow

，我可以减少口吃。@JPHellemons这只适用于您。默认情况下启用平滑滚动。你的用户会有这个问题。哇。。。真不敢相信人们忽视了这一点。。。在微软修复IE的平滑滚动之前，这实际上是唯一半可行的解决方案。是的，它只适用于一个背景图像，但这是我们目前所拥有的全部功能，可以在两分钟内完成。如果页面上有多个已修复的项目，它将不起作用。这对我有效。尝试了这个答案中的所有解决方案，最后将背景图像移动到body标签上成功了。我的页面上有两个项目是固定的，即背景图像和返回顶部按钮。我有一个类似的问题，在屏幕顶部有一个引导固定导航栏。如果页面还包含一些固定或绝对文本，导航栏在滚动时会抖动。只需将z-index=1添加到固定/绝对文本中就可以修复它。我已经尝试了上述所有操作，但无法使其工作。仍然只在鼠标滚动时跳转：（要添加到这一点，请确保您没有位置：固定元素作为位置的子元素：固定元素使其绝对定位，而它仍然是固定的，因为父元素是固定的“您在每个子元素上显式设置位置”对我有效。z-index为我做了，谢谢！（IE11，Windows 10）此解决方案将停止在窗口上触发滚动事件，因此，如果使用依赖于此类事件触发的任何东西，请务必小心。（溢出：隐藏，滚动事件不工作）（溢出：自动，滚动事件触发）此解决方案不适用于移动浏览器，因为它重新定义了默认的滚动容器，这会导致滚动速度变慢和其他问题（例如，查询面板不会在滚动时隐藏）。我最后只在浏览器为IE for desktop时添加了此功能，以便其他浏览器中的滚动容器可以正常工作。对我来说，某些功能可能无法在IE中工作是正常的……我真的不明白像MS这样的公司如何无法删除此漏洞，这一漏洞已经存在2年了……这是我发现的唯一解决方案我也是，但我有

html{
    overflow: hidden;
    height: 100%;    
}
body{
    overflow: auto;
    height: 100%;
}