Question

我试图修复background-image。

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

我该如何解决这个问题？

这是我的CSS：

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

Answer 1

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

在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]-->

Answer 2

我尝试在您的网站上禁用某些css规则，当我删除html标记的背景属性（背景：#fff;）时，页面滚动顺畅。请试一试，告诉它是否适合您。

更新

我还找到了解决方法here：

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

  var wheelDelta = event.wheelDelta;

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

Answer 3

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

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

enter image description here

Answer 4

这对我来说似乎正在使用触控板。它建立在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
        } 
    });
}

Answer 5

对于最新的边缘发布使用此功能，因为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%;
    }
}

Answer 6

目标IE并使用滚动似乎可以解决问题。

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

Answer 7

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

Answer 8

之前的回答修复了我在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
        } 
    });
}

Answer 9

使用此脚本：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%";

}

Answer 10

我尝试了两次jr的CSS解决方案，但它在Edge / 15.15063中无效。 Dasha的答案解决了Edge中的问题，但没有解决IE 11.我注意到document.documentMode条件未完成。 document.documentmode将为除{8}以外的IE 8+以外的所有浏览器返回undefined。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 -

Answer 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
        } 
    });

}

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

11 个答案: