为什么在 IE 上滚动时固定的背景图像会移动？答案

【问题标题】：Why does a fixed background-image move when scrolling on IE?为什么在 IE 上滚动时固定的背景图像会移动？
【发布时间】：2015-03-14 00:59:16
【问题描述】：

我正在尝试修复background-image。

正如您在my blog 中看到的，background-image 在 IE 11 上滚动时正在移动。

我该如何解决这个问题？

这是我的 CSS：

background-image: url("./images/cover.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;

【问题讨论】：

标签： css internet-explorer background-image internet-explorer-11

【解决方案1】：

这是 Internet Explorer 中固定背景图像的已知错误。我们最近做了一些工作来改善这种行为，并为我们在 Windows 10 上的 Internet Explorer 预览版发布了更新。您可以在 Mac OS X 或 Windows 上通过http://remote.modern.ie 测试这些更改。

以下是之前和之后的 IE 11 和 IE Remote Preview。请注意，使用鼠标滚轮滚动不会再像在 Internet Explorer 11 中那样导致固定背景图像跳跃（或抖动）。

【讨论】：

@the1900 当您为 body 元素设置背景附件时，此错误不存在。
@Jonathan Sampson 您打算什么时候发布修复此错误的更新？什么版本的 IE & windows 受到影响？例如，我尝试过使用 win7 + IE11 并且不存在错误。另一方面 IE11 + win8.1 有这个错误。这与 windows 和/或 IE 版本有关还是其他因素很重要？
@TamásBolvári Windows 10 上的 Internet Explorer 11 没有完成（如果有的话）功能工作。 IE 11 中 Web 平台的任何错误都可能在 IE 11 中永久存在。请在 Edge 中进行测试，并报告您在那里遇到的任何问题。
只是指出这个错误仍然存在于 Edge 版本 38.14393.0.0 中。
截至 2017 年 8 月，此错误仍然存在于 Windows 10 + IE11（即微软最广泛采用的操作系统版本和最流行的浏览器版本）上。看到他们在 2.5 年前完成了针对其他操作系统目标的修复，很高兴知道他们为什么拒绝将其推广到人们实际使用的平台组合......：\

【解决方案2】：

我试图禁用您网站上的一些 css 规则，当我删除 html 标记的背景属性 (background:#fff;) 时，页面会平滑滚动。请尝试一下，看看它是否适合您。

更新：

我也找到了解决方法here：

$('body').on("mousewheel", function () {
  event.preventDefault();

  var wheelDelta = event.wheelDelta;

  var currentScrollPosition = window.pageYOffset;
  window.scrollTo(0, currentScrollPosition - wheelDelta);
});

【讨论】：

这确实解决了我在 Win8 - IE11 上的问题
这适用于鼠标滚轮，但如果您使用触控板、向上/向下键或屏幕（触摸/滑动）滚动，错误仍然存在。

【解决方案3】：

这似乎适用于我的触控板。它基于radarek 的解决方法。

    if(navigator.userAgent.match(/Trident\/7\./)) {
    $('body').on("mousewheel", function () {
        event.preventDefault();

        var wheelDelta = event.wheelDelta;

        var currentScrollPosition = window.pageYOffset;
        window.scrollTo(0, currentScrollPosition - wheelDelta);
    });

    $('body').keydown(function (e) {
        e.preventDefault(); // prevent the default action (scroll / move caret)
        var currentScrollPosition = window.pageYOffset;

        switch (e.which) {

            case 38: // up
                window.scrollTo(0, currentScrollPosition - 120);
                break;

            case 40: // down
                window.scrollTo(0, currentScrollPosition + 120);
                break;

            default: return; // exit this handler for other keys
        } 
    });
}

【讨论】：

这适用于我的滚轮和箭头键。我没有要测试的触控板。不过，在击键时，我将 preventDefault 移到了案例中。否则，所有其他击键都会被阻止，因此您无法在表单中输入文本。
请注意，使用此实现会带走浏览器本机应用于滚动“块”的动画，因此最终结果是更“断断续续”的滚动体验。但是您可以在此实现中添加动画，以尝试恢复平滑滚动的感觉。也许是这样的：stackoverflow.com/a/26798337/718325

【解决方案4】：

上一个答案解决了我在 IE11 中的问题！但是，我必须做一个小改动，这样我也可以使用 F5（或 Ctrl+F5）刷新页面：

//在 IE 11 中，这解决了在不使用滚动条的情况下滚动照片休息时的问题

 if(navigator.userAgent.match(/Trident\/7\./)) {
    $('body').on("mousewheel", function () {
        event.preventDefault();

        var wheelDelta = event.wheelDelta;

        var currentScrollPosition = window.pageYOffset;
        window.scrollTo(0, currentScrollPosition - wheelDelta);
    });

    $('body').keydown(function (e) {

        var currentScrollPosition = window.pageYOffset;

        switch (e.which) {

            case 38: // up
                e.preventDefault(); // prevent the default action (scroll / move caret)
                window.scrollTo(0, currentScrollPosition - 120);
                break;

            case 40: // down
                e.preventDefault(); // prevent the default action (scroll / move caret)
                window.scrollTo(0, currentScrollPosition + 120);
                break;

            default: return; // exit this handler for other keys
        } 
    });
}

【讨论】：

【解决方案5】：

我的最终解决方案是基于我找到的所有答案：

在 Edge / ie11 / ie10 的主 css 上

/*Edge*/
@supports ( -ms-accelerator:true ) 
{
    html{
        overflow: hidden;
        height: 100%;    
    }
    body{
        overflow: auto;
        height: 100%;
    }
}
/*Ie 10/11*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) 
{
    html{
        overflow: hidden;
        height: 100%;    
    }
    body{
        overflow: auto;
        height: 100%;
    }
}

对于 ie9、ie8 和 ie7，我在单独的 hacksheet 中添加了代码（没有媒体查询）：

<!--[if lte IE 9]>
    <style type=text/css>
       html{
           overflow: hidden;
           height: 100%;    
       }
       body{
           overflow: auto;
           height: 100%;
       }
    </style>
<![endif]-->

【讨论】：

我使用了@supports (-ms-ime-align:auto) ，它适用于边缘 42.17134.1.0

【解决方案6】：

瞄准 IE 并改用滚动似乎可以解决问题。

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .className {
        background-attachment: scroll;
    }
}

【讨论】：

这不适用于最新版本的 Edge，它也存在这个问题。
值scroll 与cover 的效果不同。所以这并不能解决问题。

【解决方案7】：

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

【讨论】：

【解决方案8】：

使用此脚本：https://stackoverflow.com/a/34073019/7958220

为了检测边缘浏览器，我更改了 html 和 body 的样式。

if (document.documentMode || /Edge/.test(navigator.userAgent)) {
   document.documentElement.style.overflow = "hidden";
   document.documentElement.style.height = "100%";
   document.body.style.overflow = "auto";
   document.body.style.height = "100%";

}

【讨论】：

【解决方案9】：

我尝试了 twojr 的 CSS 解决方案，但它在 Edge/15.15063 中不起作用。 Dasha 的回答解决了 Edge 但不是 IE 11 中的问题。我注意到 document.documentMode 条件不完整。 document.documentmode 将为所有浏览器返回 undefined，除了 IE 8+ 将返回 return the mode number。这样，下面的代码将同时检测 IE 8+ 和 Edge 并解决背景图像问题。

if ((document.documentMode != undefined) || (/Edge/.test(navigator.userAgent))) {
document.documentElement.style.overflow = "hidden";
document.documentElement.style.height = "100%";
document.body.style.overflow = "auto";
document.body.style.height = "100%";}

JS Fiddle for the above code. 这也适用于箭头键和触控板滚动。我没有考虑到IE7-

【讨论】：

【解决方案10】：

对于最新的边缘版本，请使用这个，因为 twicejr 之前的回答不再有效：

/*Edge - works to 41.16299.402.0*/
@supports (-ms-ime-align:auto) 
{
    html{
        overflow: hidden;
        height: 100%;       
    }
    body{
        overflow: auto;
        height: 100%;
        position: relative;
    }
}

/*Ie 10/11*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) 
{
    html{
        overflow: hidden;
        height: 100%;    
    }
    body{
        overflow: auto;
        height: 100%;
    }
}

【讨论】：

这很好用！但是我有一个粘性菜单，向下滚动时会固定在顶部。应用此 hack 后，IE 中的菜单不再具有粘性（菜单向上滚动且不会固定在顶部）。在不丢失粘性菜单的情况下如何解决 IE 中的问题？

【解决方案11】：

这是一种根据之前的答案处理 PageUP 和 PageDOWN 键的方法：

if(navigator.userAgent.match(/Trident\/7\./)) { // if IE
    $('body').on("mousewheel", function () {
        // remove default behavior
        event.preventDefault(); 

        //scroll without smoothing
        var wheelDelta = event.wheelDelta;
        var currentScrollPosition = window.pageYOffset;
        window.scrollTo(0, currentScrollPosition - wheelDelta);
    });
    $('body').keydown(function (e) {
        var currentScrollPosition = window.pageYOffset;

        switch (e.which) {
            case 33: // page up
                e.preventDefault(); // prevent the default action (scroll / move caret)
                window.scrollTo(0, currentScrollPosition - 600);
                break;
            case 34: // page down
                e.preventDefault(); // prevent the default action (scroll / move caret)
                window.scrollTo(0, currentScrollPosition + 600);
                break;
            case 38: // up
                e.preventDefault(); // prevent the default action (scroll / move caret)
                window.scrollTo(0, currentScrollPosition - 120);
                break;
            case 40: // down
                e.preventDefault(); // prevent the default action (scroll / move caret)
                window.scrollTo(0, currentScrollPosition + 120);
                break;
            default: return; // exit this handler for other keys
        } 
    });

}

【讨论】：