[英]When I scroll a modal in mobile, an extra white space appears on the bottom of the page
html code html代码
<button onclick="openModal()">Click</button>
<div id="my-modal" class="modal">
<span class="closed" onclick="closeModal()">
<img
src="img/close-left-product-ui-ux-design-cover.webp"
style="width: 24px; height: 24px;"
alt="close button"
class="img-fluid"
/>
</span>
<div class="modal-content">
<div class="my-slides">
<img
src="img/demo-product-ui-ux-design-cover-full@3x.webp"
class="img-fluid"
alt="demo product"
/>
</div>
</div>
</div>
css code css代码
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow-y: scroll;
background-color: rgba(0, 0, 0, 0.8);
}
.modal-content {
position: relative;
top: 55px;
border-radius: 4px;
padding: 24px;
margin-left: auto;
margin-right: auto;
width: 70%;
max-width: 1000px;
border: none;
background-color: #fff;
height: max-content;
margin-bottom: 50px;
}
.my-slides {
width: 100%;
}
.my-slides img {
width: 100%;
}
.closed {
position: fixed;
top: 30px;
right: 25px;
font-size: 48px;
font-weight: bold;
transition: 0.3s ease;
}
/* Media queries */
@media (min-width: 576px) and (max-width: 767px) {
.modal-content {
margin-left: 10px;
}
}
@media (min-width: 0px) and (max-width: 575px) {
.modal-content {
margin-left: 10px;
}
}
JS code JS代码
function openModal() {
document.getElementById("my-modal").style.display = "block";
// document.querySelector("nav").style.display = "none";
document.querySelector("body").style.overflow = "hidden";
}
function closeModal() {
document.getElementById("my-modal").style.display = "none";
// document.querySelector("nav").style.display = "block";
document.querySelector("body").style.overflow = "auto";
}
When I scroll the modal in mobile, white space appears at the bottom initially.当我在移动设备中滚动模态时,空白最初出现在底部。 When I reach at a certain height, and again scroll the modal, it doesnt appear.
当我到达某个高度并再次滚动模态时,它没有出现。 I have seen some solutions regarding this but was not able to solve problem.
我已经看到了一些与此有关的解决方案,但无法解决问题。
Here is the link https://pfs-r.netlify.app/这是链接https://pfs-r.netlify.app/
Please open it in mobile, then only you will see it.请用手机打开,只有你自己能看到。
This problem appears when the URL bar hides, the height of the page is not the same.这个问题出现在URL栏隐藏时,页面高度不一样。
For details see:详情请见:
https://developers.google.com/web/updates/2016/12/url-bar-resizing https://developers.google.com/web/updates/2016/12/url-bar-resizing
Otherwise you can put everything in one root fixed position div
with height 100%.否则你可以把所有东西都放在一个根固定的 position 高度为 100% 的
div
中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.