3
即使將溢出設置爲滾動，也無法獲得覆蓋範圍內的Google表單iframe滾動，而是在底部的背景繼續滾動移動。它可以在桌面Chrome瀏覽器或Safari瀏覽器中很好地滾動iframe，即使我在桌面Chrome上將設備更改爲移動設備。無法在移動iOS上滾動iframe Safari
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;
}
}
}