我在一個頁面中有以下iframe(實際呈現只是一個例子):
<div id="google-slides-iframe-container">
<iframe id="google-slides-iframe" src="https://docs.google.com/presentation/d/1_zfj0xr6bOTZcGOPR4ASOVCccg5zvDrGrU3XxUUe5Ik/embed" frameborder="0"></iframe>
</div>
問題是當演示文稿沒有完全在視圖中時,也就是說,假設用戶已經向下滾動頁面,使得演示文稿的一半可見,當用戶單擊按鈕轉到下一張幻燈片時,頁面突然向上移動并滾動,使得演示文稿的頂部現在在視圖中。然后用戶必須向下滾動回到按鈕,才能轉到下一張幻燈片。在大屏幕上,演示文稿完全適合一個頁面,這不是問題,但在較小的屏幕上,這種行為是有問題的。
我怎樣才能防止iframe中的Google Slides文檔在點擊next和previous按鈕后向上滾動它的父文檔?我今天做了一些研究,但是一點也不成功。有很多方法可以做到這一點,例如,跟蹤鼠標,跟蹤它何時進入和離開iframe,以及當鼠標在iframe區域內時禁止頁面滾動。但是,當用戶只使用觸摸手勢與頁面進行交互時,整個邏輯在平板電腦上就失效了。
我不確定谷歌是否在使用scrollIntoView API來實現這一點。如果是的話,也許覆蓋這個函數的原型來完全禁用它是有意義的。我在iframe及其容器上嘗試過這樣做,但效果不大。也許同樣覆蓋scrollTop()函數也是有意義的。我還沒試過這個。
顯然,這個問題是在五年前向W3C提出的,他們還沒有對此做出回應。所以我找不到一個官方的方法來阻止iframes滾動它們的父母。