iOS iframe可滾動性問題 - 滾動不起作用

-1

滾動不適用於iOS設備，如iPad或iPhone 6.由於某種原因，「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

通過添加overflow: hidden;到你的HTML，身體應該解決這個問題。下面是一個例子，我使用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可滾動性問題 - 滾動不起作用

回答

相關問題