停止Iframe阻止父文檔滾動？

我似乎有與iframes和滾動其他人相反的問題。我需要iframe（包含YouTube視頻）以防止滾動主文檔。如果我將鼠標懸停在上面，頁面將不會通過滾輪進行滾動，並且根據最新的鉻觸摸設備的金絲雀模擬，我無法將手指放在框架上並滾動主文檔。任何方式來阻止這一點？我的CSS低於：停止Iframe阻止父文檔滾動？

.GalleryVideoWrapper { 
position: relative; 
padding-bottom: 56.25%; /* 16:9 */ 
padding-top: 25px; 
height: 0; 
width:95%; 
margin:auto; 
display:block; 
} 

.GalleryVideoWrapper iframe { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
}

來源

2014-11-23 photocode

曾經有一個scrolling attribute，但它是在HTML5棄用。試試這個：

iframe { 
    overflow: hidden; 
}

不要忘了設置你的寬度和高度的地方！

如果你想嘗試的iframe滾動屬性，你可以像這樣：

<iframe src="blah.html" width="200" height="200" scrolling="no"></iframe>

看到這裏的工作例如： http://jsfiddle.net/4dt4zhwt/1/

來源

2014-11-23 02:17:35 superUntitled

試過了，模擬器不會讓它工作:( – photocode 2014-11-23 02:24:36

我可以讓滾輪在Linux和Windows下使用chrome工作，這可能是一個Firefox的錯誤 – photocode 2014-11-23 02:28:20

你還看到一個滾動條嗎？身高要大一些 – superUntitled 2014-11-23 02:34:35

我不知道你是否已經找到解決的辦法，但我遇到了同樣的問題，即我網站中的所有iframe（twitter，facebook和youtube）都阻止了頁面自身的滾動。經過大量的調試和咖啡，我發現它至少在我的情況下是隱藏的，我已經在4/5父母的表單元素上隱藏起來了。刪除溢出屬性解決了我的問題，希望它適合你！

來源

2015-10-02 09:45:15

我在iPhone/iPad Safari上只有這個問題，這對我有用！我有'html，bo dy {overflow-x：hidden}'，因爲我隱藏了屏幕內容並且不希望用戶看到它。我的iFrame不會允許touchmove事件滾動頁面，除非我刪除該樣式！我會盡力從這裏出發。謝謝 – 2016-05-19 14:24:53

我水平滾動禁用，像這樣：

html, body { 
    overflow-x: hidden 
}

在頁面上有iframe，如果我試圖通過觸摸和Safari上移動的iframe的iPad或iPhone垂直滾動頁面，我不能「T。

這個固定對我來說：

* { 
    -webkit-overflow-scrolling: touch 
}

來源

2016-05-20 09:10:11

這個問題不清楚，所以就到下面一些細節上的各種方法來實現這一效果，它是如何工作。

如果您不需要與iframe交互，那麼快速和骯髒的解決方案是使用pointer-events: none;。這會將iframe放在頁面上，而不允許它滾動。但是，它也不允許你點擊它。這顯然不適用於YouTube視頻，但重要的是要知道這是一個選項。

如果您需要與iframe進行交互，無論是播放視頻還是點擊鏈接，您所需要做的就是確保iframe足夠大以顯示完整內容。我不確定OP遇到什麼特定問題，因爲我們沒有他們的HTML，但是如果您滾動並且iframe不是也在嘗試滾動，它不會阻止父級滾動。

基本上，如果將光標放在iframe上並滾動，則iframe將首先接收事件。如果它不需要滾動（或者它不能或者它已經到達iframe的底部），則該事件將被傳播給父級。

最後，如果你有一個你需要滾動的iframe，但是你想在光標位於iframe上的時候滾動父級，那麼你是不走運的。無法通知iframe有時用戶想要滾動整個頁面。這就是iframe的工作原理。您可以從iframe中移除光標進行滾動，也可以滾動到iframe的底部並繼續瀏覽頁面。

在問題中使用YouTube視頻和CSS，我創建了演示here供您查看。我還包括兩個相同的可滾動的iframe，並將pointer-events: none;應用於其中，以演示其工作原理。

來源

2018-02-15 18:58:26 amflare

謝謝！這正是我所需要的。 – McCuz 2018-02-19 07:37:18

停止Iframe阻止父文檔滾動？

回答

相關問題