如何在iOS上使灯箱滚动？

Question

I know that this problem was discussed many times here, but I did not find an answer to really help me.

I have a lightbox with is code:

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);
        }

And 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");
});

And everything works perfectly except for the iOS devices, on Safari where my lightbox is not scrolling at all.

I have tested on Mac devices on Safari and it works. Can you please help me, it`s very important for me to fix this issue.

Thank you very much!

Here is a JSfiddle, with the code: https://jsfiddle.net/9mesun50/1/

Answer 1

I have found a solution to my problem, instead of using the "object" tag:

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

I used the iframe tag. It works ok.

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

Here is an example:

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