隱藏溢出的背景移動

在網站上工作時，我遇到了以下問題。 Magnific Popup（lightbox插件）將HTML設置爲溢出：hidden;當燈箱打開時，這可以防止滾動。隱藏溢出的背景移動

在我的網頁我有一個固定的標題圖片：

.header { 
background-image: url("http://placehold.it/1920x400"); 
height: 400px; 
background-size: contain; 
background-attachment: fixed; 
}

當我打開HTML被設置爲溢出燈箱：隱藏; 和背景圖片移動。溢出：隱藏;導致背景移動。

我不知道casuses這種行爲，我曾嘗試以下的事情：

Magnific酒店的彈出也設置在html元素保證金右，以防止轉移的內容，與此不工作的背景。
嘗試過設置overflow-y：scroll;而燈箱是開放的，這也不起作用。
使用background-origin或background-clip也似乎不能解決問題。

我簡化了我的代碼，並結束了這個Codepen，看到背景移動單擊按鈕。

Codepen：Link to codepen

希望你能幫助我，

沃特

編輯：

我想解決運動背景，而不設置溢出到自動。當燈箱打開時，當滾動條可見時，我不喜歡它。

來源

2015-04-17 Aralon

找到了解決這一問題，這被張貼在CSS書籤交易：

background-size: calc(100% - 17px) 這是第一溶液Codepen of first solution
background-size: 100vw 這是第二溶液Codepen of second solution

來源

2015-04-18 18:41:41 Aralon

從MDN文章background-attachment：

固定：這個關鍵字意味着背景固定相對於視口。

因爲你的元素被定位相對於「視」，當您切換到overflow: hidden，視口與取消滾動條的稍寬獲得，導致背景的重新定位，由於您使用的background-size: contain。現在的背景可以稍微覆蓋一些空間，因此尺寸略有增加。

雖然我很討厭用!important多，你可以覆蓋插件的變化：

html{ 
    margin-right: 0 !important; 
    overflow: auto !important; 
}

如果插件使用類，而不是直接更改HTML元素的樣式，你可以重寫它沒有重要的。

來源

2015-04-17 17:13:53

由於回覆！有沒有其他的解決方案來修復移動背景而不將溢出設置爲自動？我想保持滾動條隱藏。 – Aralon

@Aralon我想不出一個乾淨的方式來處理它，而不刪除'background-attachment：fixed'或'background-size：cover'。你也許可以將你的整個頁面封裝在一個div中，然後使用'background-attachment：scroll'並且在'div'上設置滾動條。但這很快就會變得凌亂。 –

是的，這會變得非常混亂，但我會試一試:)也許一個jquery插件像backstretch或anystretch可以解決這個問題？但是最後一次我試着用background-attachment不能很好地工作：固定的。 – Aralon

隱藏溢出的背景移動

回答

相關問題