即使将溢出设置为滚动,也无法在叠加层中滚动google表单iframe,而下方的背景会继续在移动设备上滚动。它可以在桌面chrome / safari上滚动到iframe内部,即使我将设备更改为桌面Chrome上的移动设备也是如此。
HTML:
<div class="modal fade" id="follow-modal" tabindex="-1" role="dialog" aria-labelledby="follow-modal">
<div class="modal-background"></div>
<div class="modal-wrapper">
<div class="survey-wrapper">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLScYLpClPexPWtT9UETnksKMKnzH5xRgs-UikH21Ktl6PhJQ-w/viewform?embedded=true" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
</div>
</div>
</div>
SCSS:
#follow-modal {
.modal-background {
background-color: rgba(0,0,0,.9);
}
.modal-wrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: flex-start;
justify-content: center;
}
.survey-wrapper {
position: relative;
background-color: transparent;
text-align: center;
margin-top: 100px;
width: 700px;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
@media (max-width: $screen-md-min) {
margin-left: 10px;
margin-right: 10px;
}
iframe {
width: 100%;
height: 600px;
}
}
h3 {
margin-bottom: 15px;
}
button.close {
color: white;
position: absolute;
top: -60px;
right: -50px;
opacity: 1;
@media (max-width: $screen-md-min) {
right: -20px;
}
&:hover {
color: white;
}
}
}
答案 0 :(得分:1)
如果其他答案对您不起作用(因为它们对我不起作用),请查看以下代码:
<div style="overflow: auto!important; -webkit-overflow-scrolling: touch!important;">
<iframe>Loading...</iframe>
</div>