如何在 iOS 上制作可滚动的灯箱？

Posted 2023-02-23

【中文标题】如何在 iOS 上制作可滚动的灯箱？

【英文标题】：How can I make a lightbox scrollable on iOS?

【发布时间】：2017-04-13 10:32:02

【问题描述】：

我知道这个问题在这里讨论过很多次，但我没有找到真正帮助我的答案。

我有一个带有 is 代码的灯箱：

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/

【参考方案1】：

我找到了解决问题的方法，而不是使用“对象”标签：

<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/