爲什麼在IE上滾動時背景圖像正在移動？

我的Chrome版本39.0.2171.99米
IE版本是11

你看到myBlog，背景圖像移動當只滾動IE時。我該如何解決這個問題？

這是我的背景

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

請幫我代碼..

來源

2015-01-15 the1900

這是在Internet Explorer中固定的背景圖像的已知的bug。我們最近做了一些工作來改善這種行爲，並將更新發布到了我們的預覽版的Windows 10上的Internet Explorer。您現在可以在Mac OS X或Windows上測試http://remote.modern.ie上的更改。

下面是之前和之後的IE 11和IE遠程預覽。請注意如何使用鼠標滾輪滾動不再導致固定背景圖片的跳（或抖動），因爲它在Internet Explorer中做了11

enter image description here

來源

2015-01-15 19:28:13 Sampson

謝謝你的回答，但看到[thisblog [（http://est0que.tistory.com/category），你可以看到它不會移動時滾動甚至瀏覽器是IE 。我複製了他的代碼並進行調整。我的博客仍在滾動...... – the1900 2015-01-16 03:47:00

@ the1900當你設置body元素的background-attachment時，這個bug不存在。 – radarek 2015-02-15 17:35:59

@Jonathan Sampson你打算什麼時候發佈修復這個bug的更新？什麼版本的IE和Windows受到影響？我曾嘗試使用win7 + IE11，並且bug不存在。另一方面IE11 + win8.1有這個bug。這與Windows和/或IE版本有關，或者其他因素很重要？ – radarek 2015-02-15 17:38:48

我試圖禁用一些CSS規則在您的網站當我爲html標籤移除背景屬性（background：#fff;）時，頁面平滑滾動。請嘗試一下，告訴它是否適合你。

更新：

我還發現解決方法here：

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

    var wheelDelta = event.wheelDelta; 

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

來源

2015-02-15 17:47:19 radarek

這確實解決了問題我在Win8上 - IE11 – Captainlonate 2015-03-31 16:15:57

這適用於鼠標滾輪，但如果您使用觸控板，上/下鍵或屏幕（觸摸/滑動）滾動錯誤仍然存在。 – patrickzdb 2015-06-09 19:17:32

這似乎是工作在觸控板給我。它建立在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 
     } 
    }); 
}

來源

2015-06-13 00:39:47

這是用滾輪和箭頭鍵爲我工作。我沒有觸控板進行測試。不過，在擊鍵方面，我將preventDefault移入了案例中。否則，所有其他擊鍵都會被阻止，因此您無法將文本輸入到表單中。 – gearz 2015-07-31 22:36:39

請注意，使用此實現會取消瀏覽器原生應用於滾動「塊」的動畫，因此最終結果是更「不連貫」的滾動體驗。但是，您可以將動畫添加到此實現中，以嘗試獲得平滑的滾動感。也許是這樣的：http：// stackoverflow。com/a/26798337/718325 – 2016-08-26 21:09:37

上一個答案在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 
     } 
    }); 
}

來源

2015-06-23 15:08:16

我最後的修復是基於所有我已經找到了答案：

在爲邊緣/ IE11/IE10

/*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%; 
    } 
}

對於即主css 9，ie8和ie7我已經在單獨的hacksheet中添加了代碼（無媒體查詢）：

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

來源

2016-02-29 13:15:27 twicejr

這不適用於最新版本的Edge，它也會出現此問題。 – 2017-03-16 16:40:07

Ruud貸方，我已經更新了答案，所以它也應該在Edge中工作。 – twicejr 2017-05-23 07:06:42

目標IE和使用滾動代替似乎解決了問題。

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

來源

2016-06-08 13:26:56

這不適用於Edge的最新版本，該版本也存在此問題。 – 2017-03-16 10:09:51

我對面，我能夠從重疊固定的背景元素去除box-shadow減少口吃的情況下，來了。

來源

2017-03-16 10:10:29

使用這個腳本：https://stackoverflow.com/a/34073019/7958220

要檢測邊緣的瀏覽器，然後我改變了風格的HTML和身體。

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%";

}

來源

2017-05-04 16:04:54 Dasha

我試圖twicejr的CSS解決方案，但它不是在邊工作/ 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-

來源

2017-11-13 22:49:11

爲什麼在IE上滾動時背景圖像正在移動？

回答

相關問題