IE 10 和 11 使固定背景在使用鼠标滚轮滚动时跳转

Posted 2023-03-06

【中文标题】IE 10 和 11 使固定背景在使用鼠标滚轮滚动时跳转

【英文标题】：IE 10 & 11 make fixed backgrounds jump when scrolling with mouse wheel

【发布时间】：2013-10-23 01:20:39

【问题描述】：

当您在 Windows 8 中使用鼠标滚轮滚动时，固定的背景图像会疯狂地反弹。这只会影响 IE 10 和 IE 11。这也会影响带有 position:fixed 的元素。 这是一个带有固定背景图像的示例：

http://www.catcubed.com/test/bg-img-fixed.html

这里是示例代码：

#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中的背景保持不变？

【问题讨论】：

找到这个：connect.microsoft.com/IE/feedback/details/795070/…

固定元素内的固定元素会导致跳跃问题。将父元素的位置更改为，例如绝对。 Absolute 大部分工作无需任何其他更改，或根据您的需要进行更改。

对我来说，跳动的行为是由 HTML 元素上的opacity:0.99 引起的（Mac 上粗体字体的修复）。

不幸的是，这个问题已关闭。我也在这个问题上苦苦挣扎，在调查期间我发现了这个基于 javascript 的解决方法： if(navigator.userAgent.match(/Trident\/7\./)) // if IE $('body').on(" mousewheel", function () // 移除默认行为 event.preventDefault(); // 不平滑滚动 var wheelDelta = event.wheelDelta; var currentScrollPosition = window.pageYOffset; window.scrollTo(0, currentScrollPosition - wheelDelta); ) ;

我刚刚遇到一个案例，通过从与固定背景重叠的元素中删除 box-shadow，我能够减少口吃。

【参考方案1】：

我知道答案有点晚了，但我遇到了同样的问题，并且能够通过将这些属性添加到我的 css 文件来解决它

html
    overflow: hidden;
    height: 100%;    

body
    overflow: auto;
    height: 100%;

来自 cmets：

此解决方案会阻止滚动事件在窗口上触发，因此如果您使用的任何东西依赖于此类事件触发，请务必小心。 codepen.io/anon/pen/VawZEV?editors=1111（溢出：隐藏，滚动事件不起作用）codepen.io/anon/pen/PNoYXY?editors=1111（溢出：自动，滚动事件触发）- Dan Abrey

因此，这可能会导致您的项目出现一些问题。但我没有看到解决 IE 中此错误的另一种方法。

【讨论】：

此解决方案阻止滚动事件在窗口上触发，因此如果您使用任何依赖于此类事件触发的东西，请务必小心。 codepen.io/anon/pen/VawZEV?editors=1111（ 溢出：隐藏，滚动事件不起作用）codepen.io/anon/pen/PNoYXY?editors=1111（ 溢出：自动，滚动事件触发）

此解决方案不适用于移动浏览器，因为它重新定义了默认滚动容器，导致滚动速度变慢和其他问题（例如，查询面板不会在滚动时隐藏）。

我最终只在浏览器是桌面版IE的情况下添加了这个，这样其他浏览器中的滚动容器就可以正常工作了。对我来说，某些功能可能无法在 IE 中运行是可以的。 ....我真的不明白像MS这样的公司如何无法删除这个已知2年的错误...

这是我发现的唯一可行的解​​决方案，但是我遇到了一个奇怪的错误，当我的鼠标悬停在顶部的固定导航栏上时，我无法向下滚动页面。删除 html overflow: hidden 会阻止这种情况发生，但也会破坏视差修复。我猜这可能是@DanAbrey 所指的。关于此解决方案如何在不停止这些滚动事件的情况下工作的任何想法？

【参考方案2】：

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

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

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

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

在上述所有情况下，这都能正常工作，并且滚动流畅。所以这证明是可以做到的！现在慢慢添加你的属性，直到你能够让位置固定的元素在你的网站上下文中工作。

然后我发现向固定项目添加 z-index 解决了这个问题。 （例如 z-index：1）

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

因此，您需要确保所有子元素都没有设置位置， 或者如果他们这样做，您明确地为每个孩子设置一个位置。

例如

<!-- Works -->
<div style="position: fixed;">
    <div>Nice</div>
    <div>Wicked</div>
    <div>Cool</div>
</div>

<!-- Element with position: relative, experiences the bug -->
<div style="position: fixed;">
    <div style="position: relative;">sad</div>
    <div>sad</div>
    <div style="position: fixed;">happy</div>
</div>

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

【讨论】：

我遇到了类似的问题，屏幕顶部的引导固定导航栏。如果页面还包含一些固定或绝对文本，则导航栏在滚动时会摇晃。只需将 z-index = 1 添加到固定/绝对文本即可修复它。

我已经尝试了以上所有方法，但无法正常工作。仍然只在鼠标滚动时跳转:(

要补充一点，确保你没有一个 position:fixed 元素作为 position:fixed 元素的子元素，而是让它绝对定位它仍然会被固定，因为父元素是固定的

“你明确地为每个孩子设置了一个位置”为我工作。

z-index 帮我做了，谢谢！ （IE11、Windows 10）

【参考方案3】：

这是一种解决方法（在 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;
    

【讨论】：

哇...不敢相信人们忽略了这一点...这实际上是该问题的唯一半可行解决方案，直到 MS 修复 IE 的平滑滚动。是的，它适用于单个背景图像，但这是我们目前所拥有的，并且可以在两分钟内完成。

如果页面上有多个已修复的项目，则无法使用。

这对我有用。尝试了此答案中的所有解决方案，最后将背景图像移动到正文标签有效。我的页面上有两个项目是固定的，即背景图像和返回顶部按钮

【参考方案4】：

尝试关闭平滑滚动选项。

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

就像渲染bug.... MS IE团队正在调查....

【讨论】：

@JPHellemons 这只对你有用。默认情况下启用平滑滚动。你的用户会有这个问题。

【参考方案5】：

只需简单地将 body 容器定义为 relative。

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

【参考方案6】：

在我的情况下，解决方法是简单地从具有 position:fixed 的元素中删除 z-index 属性，然后 IE 停止了奇怪的闪烁。

（在拥有 z-index 属性时禁用 IE 选项上的平滑滚动有效，但这不是解决方案，因为用户很可能默认启用它）。