在CSS更改後，IPad iframe滾動到頂部

在iPad Safari上打開以下HTML。在iframe中向下滾動。選擇導致CSS更改的男性或女性單選按鈕。注意iframe滾動回頂端。我正在處理的應用程序中遇到同樣的問題，並且此問題只發生在iPad上（Android和桌面瀏覽器沒有此問題）。在CSS更改後，IPad iframe滾動到頂部

<!DOCTYPE html> 
<html> 
    <head> 
    <title>iframe test</title> 
    <style> 
     body { 
     margin: 0; 
     padding: 20px; 
     } 
     div.iframe-container { 
     width: 850px; 
     height: 400px; 
     overflow: hidden; 
     -webkit-overflow-scrolling: touch; 
     border: 1px solid #cecece; 
     } 
    </style> 
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script> 
    </head> 
    <body> 
    <form> 
     <input id="genderMale" type="radio" name="gender" value="male" onchange="onRadioSelect();"/> 
     <label for="genderMale">Male</label> 
     &nbsp;&nbsp;&nbsp;&nbsp; 
     <input id="genderFemale" type="radio" name="gender" value="female" onchange="onRadioSelect();"/> 
     <label for="genderFemale">Female</label> 
    </form> 
    <br/> 
    <div class="iframe-container"> 
     <iframe src="http://www.engadget.com" height="100%" width="100%" frameBorder="0"></iframe> 
    </div> 
    </body> 
</html> 

<script type="text/javascript"> 
if((navigator.userAgent.match(/iPad/i) != null) || (navigator.userAgent.match(/iPhone/i) != null)) { 
    $(".iframe-container").css("overflow", "auto"); 
} 

function onRadioSelect(event) { 
    switch($("input:checked").val()) { 
    case "male": 
    $("body").css("border", "2px solid #ff0000"); 
    break; 
    case "female": 
    $("body").css("border", "2px solid #0000ff"); 
    break; 
    } 
    setTimeout(function() { 
    $("body").css("border-style", "none"); 
    }, 250); 
} 
</script>

任何想法如何防止這種情況發生？我希望滾動位置保持不變，因爲其他事情發生在我的父頁面中。

來源

2015-05-22 Kendal

我有同樣的問題。解決了可滾動的div。

創建一個div周圍的內容（而不是IFRAME）與以下樣式：

<div style="-webkit-overflow-scrolling:touch; overflow-x:hidden; overflow-y:auto; height:100%;"> 
    <iframe src='#' /> 
</div>

如果不解決這個問題嘗試刪除<DOCTYPE>因爲HTML5不支持<DOCTYPE>

來源

2016-01-13 09:48:59

在CSS更改後，IPad iframe滾動到頂部

回答

相關問題