iOSでスクロール可能なライトボックスを作成するにはどうすればよいですか？

Question

ここで何度もこの問題が議論されていたことは知っていますが、実際に私を助ける答えは見つかりませんでした。

Htmlの

<div class="overlay-background"> 
<div class="overlay-content"> 
    <object type="text/html" data="https://en.wikipedia.org/wiki/Dentist" style="width: 100%; height: 100%;" </object> 
</div> 

CSS

.noscroll { 
     overflow: hidden; 
     overflow-y: hidden; 
     height: 100%; 
    } 

.scroll { 
    overflow: scroll; 
    -webkit-overflow-scrolling: touch; 
} 
.overlay-background { 
      display: block; 
      position: absolute; 
      top: 0; 
      left: 0; 
      height:100vh; 
      width: 100vw; 
      z-index: 1000; /* high z-index */ 
      background: #000; /* fallback */ 
      background: rgba(33, 72, 144, .8); 
     } 

.overlay-content 
     { 
      display: block; 
      background: rgba(33, 72, 144, .9); 
      width: 95vw; 
      height: 80vh; 
      position: absolute; 
      top: 10vh; 
      left: 2.5vw; 
      margin: 0 0 0 0; 
      cursor: default; 
      z-index: 1001; 
      box-shadow: 0 0 5px rgba(33, 72, 144, .7); 
     } 

そして、JS：コードがあると

私はライトボックスを持って

//Declare vars 
var $lightboxAnchor = $("a.list_message"); 

//Lightbox 
$(".overlay-background").hide(); 

///-------------------------------------- 
//Lightbox 
//-------------------------------------- 

$(".overlay-background").hide(); 

//Lightbox functions from leistungen 

$lightboxAnchor.click(function(){ 
    var $attr = $(this).attr("href").replace("#", ""); 
    console.log($attr); 
    $('div[id=' + $attr + ']').show(); 
    $("body").addClass("noscroll"); 
    $("html").addClass("noscroll"); 
    $(".overlay-content").addClass("scroll"); 
}); 

//Lightbox overlay 

$(".overlay-background").click(function(){ 
    console.log('alert'); 
    $(this).hide(); 
    $("body").removeClass("noscroll"); 
    $("html").removeClass("noscroll"); 
    $(".overlay-content").removeClass("scroll"); 
}); 

私のライトボックスがまったくスクロールしていないSafariでは、iOSデバイスを除いてすべてが完全に機能します。

私はSafariのMacデバイスでテストしています。 私はこの問題を解決することが非常に重要です。

ありがとうございました！私が代わりに「オブジェクト」タグを使用しての私の問題の解決策を、発見したhttps://jsfiddle.net/9mesun50/1/

Answer 1

：

<object type="text/html" data="https://en.wikipedia.org/wiki/Dentist" style="width: 100%; height: 100%;" </object> 

私はiframeタグを使用ここで

は、コードとJSfiddle、です。それは大丈夫です。ここ

iframe src="https://en.wikipedia.org/wiki/Dentist" width: 100%; height: 100%;></iframe> 

は一例であり：

https://jsfiddle.net/9mesun50/2/