我怎樣才能在iOS上的燈箱滾動？

我知道，這個問題在這裏討論過很多次，但我沒有找到答案，真正幫助我。我怎樣才能在iOS上的燈箱滾動？

我有一個燈箱和是代碼：

的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在我的收藏夾不滾動的。

我已經在Safari Mac設備測試，它的工作原理。能否請你幫我，爲我解決這個問題它了很重要的。

非常感謝！

這裏是一個的jsfiddle，用代碼：https://jsfiddle.net/9mesun50/1/

來源

2017-04-13 Cristina Amelia Derdeicea

我已經找到了解決我的問題，而是採用了「對象」標籤：

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

來源

2017-04-13 11:57:55

我怎樣才能在iOS上的燈箱滾動？

回答

相關問題