如何使 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");
});

除 iOS 设备外，在 Safari 上我的灯箱根本不滚动，其他一切正常。

我已经在 Mac 设备上的 Safari 上进行了测试，它可以正常工作。你能帮帮我吗，解决这个问题对我来说非常重要。

非常感谢！

这是一个 JSfiddle，代码为：https://jsfiddle.net/9mesun50/1/

Answer 1

我找到了解决问题的方法，而不是使用 "object" 标签：

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

我使用了 iframe 标签。它工作正常。

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

这是一个例子：

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

如何使 iOS 上的灯箱可滚动？

How can I make a lightbox scrollable on iOS?

javascript

safari

jquery

lightbox

ios