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

css internet-explorer background-image internet-explorer-11

18231 观看

11回复

109 作者的声誉

我正在努力background-image修复。

正如您在我的博客中看到的那样,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;
作者: the1900 的来源 发布者: 2015 年 1 月 15 日

回应 11


9

223695 作者的声誉

决定

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

下面是IE 11和IE Remote Preview之前和之后的内容。请注意,使用鼠标滚轮滚动不再导致固定背景图像像在Internet Explorer 11中那样跳转(或抖动)。

在此输入图像描述

作者: Sampson 发布者: 2015 年 1 月 15 日

10

1085 作者的声誉

我试图在你的网站上禁用一些css规则,当我删除html标签的背景属性(背景:#fff;)时,页面滚动顺畅。请试一试,告诉它是否适合您。

更新:

我也在这里找到了解决方法:

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

  var wheelDelta = event.wheelDelta;

  var currentScrollPosition = window.pageYOffset;
  window.scrollTo(0, currentScrollPosition - wheelDelta);
});
作者: radarek 发布者: 2015 年 2 月 15 日

4

784 作者的声誉

这似乎是在我的触控板上工作。它建立在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
        } 
    });
}
作者: Darren Alfonso 发布者: 2015 年 6 月 13 日

0

0 作者的声誉

上一个答案解决了我在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
        } 
    });
}
作者: user4434911 发布者: 2015 年 6 月 23 日

23

1053 作者的声誉

我的最终修复是基于我发现的所有答案:

在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]-->
作者: twicejr 发布者: 2016 年 2 月 29 日

1

219 作者的声誉

目标IE和使用滚动似乎解决了问题。

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .className {
        background-attachment: scroll;
    }
}
作者: John Churchley 发布者: 2016 年 6 月 8 日

1

2309 作者的声誉

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

作者: Rudey 发布者: 2017 年 3 月 16 日

0

1 作者的声誉

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

}

作者: Dasha 发布者: 2017 年 5 月 4 日

0

1 作者的声誉

我尝试了两次jr的CSS解决方案,但它在Edge / 15.15063中无效。Dasha的答案解决了Edge中的问题,但没有解决IE 11.我发现document.documentMode情况并不完整。document.documentmode将返回undefined除IE 8+以外的所有浏览器,这将返回模式编号。这样,以下代码将检测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的上述代码。 这也适用于箭头键和滚轮键盘滚动。我没有考虑到IE7-

作者: Iain Wilson 发布者: 2017 年 11 月 13 日

3

51 作者的声誉

对于最新的边缘释放使用此,因为之前的答案由twojr不再有效:

/*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%;
    }
}
作者: Peter O Brien 发布者: 2018 年 5 月 20 日

0

78 作者的声誉

这是一种基于以前的答案处理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
        } 
    });

}
作者: BigPino 发布者: 2019 年 3 月 5 日
32x32