iOS iframeのスクロール可能性の問題 - スクロールが機能しない

-1

iPadまたはiPhone 6などのiOSデバイスでスクロールが機能しない何らかの理由で 'body'がスクロールしていてiframeが停止しています。iOS iframeのスクロール可能性の問題 - スクロールが機能しない

Javascriptを

$(document).on(clickHandler, '#content a', function(){ 
href = $(this).attr("title"); 
$("#iframeContainer div").append(
    $("<iframe />") 
    .attr("src", href) 
) 
$("#iframeContainer").fadeIn(); 
});

CSS

#iframeContainer { 
display: none; 
position: fixed; 
top: 0; 
left: 0; 
z-index: 9999; 
background-color: rgba(0,0,0,0.5); 
} 

#iframeContainer div { 
position: fixed; 
left: 5%; 
top: 5%; 
width: 90%; 
height: 90%; 
overflow-y: scroll; 
-webkit-overflow-scrolling: touch 
} 

#iframeContainer div iframe { 
width: 100%; 
height: 100% 
}

HTML

<div id="iframeContainer"> 
<div></div> 
</div>

出典

2017-10-10 Jaakko Uusitalo

これらのCSSオプションが働いていました。

#iframeContainer { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 9999; 
} 

.closeIframe { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 50px; 
    padding: 0 15px; 
    line-height: 50px; 
    z-index: 9999; 
    background-color: rgba(0, 0, 0, 0.9) 
} 

.closeIframe span { 
    font-size: 22px; 
    color: #ffffff; 
    cursor: pointer 
} 

#iframeContainer .innerContainer { 
    position: fixed; 
    top: 50px; 
    left: 0; 
    padding-bottom: 50px; 
    width: 100%; 
    height: 100%; 
    background: url('../images/loading.svg') center center no-repeat #ffffff; 
    overflow-y: scroll; 
    -webkit-overflow-scrolling: touch 
} 

#iframeContainer .innerContainer iframe { 
    border: none; 
    width: 100%; 
    height: 100% 
}

出典

2017-10-20 11:22:45

あなたのhtmlにoverflow: hidden;を追加することで、体には、問題を修正する必要があります。ここでは、コンテナではなく画面の幅と高さを取得するために、width: 90vw;とheight: 80vh;を使用しました。

html,body { 
 
    overflow: hidden; 
 
    height: 100%; 
 
} 
 

 
#content { 
 
    width: 90vw; 
 
    height: 80vh; 
 
    overflow: auto; 
 
    background: lightblue; 
 
} 
 

 
#scroll-fake { 
 
    width: 50%; 
 
    height: 150%; 
 
    background: pink; 
 
}

<body> 
 
    <div id="content"> 
 
    <div id="scroll-fake"></div> 
 
    </div> 
 
</body>

出典

2017-10-10 12:03:15

これは私のためには機能しません –

高さを追加するように編集：100％;すぐに動作するはずです –

iOS iframeのスクロール可能性の問題 - スクロールが機能しない

答えて

関連する問題