当我从 Safari iOS 17 激活页面上的模式时，滚动不会被阻止-解网

问：

我有一个页面，里面有几张卡片，它们会生成一个滚动。每张卡片都有一个按钮，单击该按钮后，您可以查看该特定卡片的详细信息（出于实际目的，只有一张卡片有一个按钮）。

单击按钮后，将打开一个模式，并且显示所有卡片的滚动条消失。单击“关闭模式”按钮时，一切都会返回初始状态，滚动返回，您可以继续查看卡片。这在桌面浏览器中效果很好。

当我使用 Safari 在 iPhone （iOS 17）上打开我的页面时，出现了一个问题。如果工具栏或页面的地址栏处于自然状态（即，其全尺寸显示蓝色按钮），则打开模式会锁定滚动，关闭模式会使所有内容恢复正常。但是，如果在打开模式之前向下滑动，工具栏将变小（仅显示页面名称）。这样做然后打开模态，出于某种原因，滚动继续工作（即使模态是打开的）。

有趣的是：如果在进入页面时，您在设置中隐藏工具栏，则一切正常。

我正在附上一段视频，显示正在发生的事情。我已经尝试解决了几个小时:(

这是我的问题的视频：https://veed.io/view/5a1f63ee-223a-42a5-99a8-318115f9c88a

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main>
        
        <section class="cards-container">
            <div class="card N1"><button id="openModal">Open modal</button></div>
            <div class="card N2">card 2</div>
            <div class="card N3">Card 3</div>
            <div class="card N4">Card 4</div>
            <div class="card N5">Card 5</div>
            <div class="card N6">Card 6</div>
            <div class="card N7">Card 7</div>
            <div class="card N8">Card 8</div>
            <div class="card N9">Card 9</div>
            <div class="card N10">Card 10</div>
        </section>
    </main>
    
    <section class="modal-container" id="modalContainer">
        <div class="modal">
            <button id="closeModal">Close modal</button>
        </div>
    </section>
</body>
<script src="script.js"></script>
</html>

CSS代码：

body {
    margin: 0 auto;
}

main {
    z-index: 1;
}
.cards-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    min-height: 100svh;
}

.card {
    display: flex;
    align-items: center;
    justify-content: center;
    
    width: 150px;
    height: 160px;

    background-color: antiquewhite;
}
#closeModal {
    margin-top: 20px;
    color: white;
    background-color: rgb(224, 36, 36);
}
button {
    width: 100px;
    height: 60px;
    border-radius: 20px;
    border-style: none;
    
    color: white;
    background-color: rgb(38, 38, 38);
}
.card.N2 {
    background-color: rgb(83, 207, 83);
}

.card.N4 {
    background-color: yellow;
}
.card.N6 {
    background-color: blueviolet;
}
.card.N7 {
    background-color:brown;
}
.card.N8 {
    background-color: aqua;
}
.card.N9 {
    background-color: chartreuse;
}
.card.N10 {
    background-color: blueviolet;
}


/* styles to modal */

.modal-container {
    padding-top: 20px;
    display: none;

    position: fixed;
    top: 0;
    bottom: 0;
    
    width: 100%;
    height: 100vh;
}
.modal-container.active {
    display: block;
}

.modal {
    display: flex;
    justify-content: center;

    position: absolute;
    
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 300px;
    height: 300px;

    background-color: rgb(88, 253, 253);
}

JS Vanilla 代码：

const btnOpenModal = document.getElementById('openModal');
const btnCloseModal = document.getElementById('closeModal')
const modal = document.getElementById('modalContainer');

let modalAbierto = false;

btnOpenModal.addEventListener('click', function() {
    modal.classList.add('active');
    document.body.style.overflow = 'hidden'

});

btnCloseModal.addEventListener('click', function() {
    modal.classList.remove('active');
    document.body.style.overflow = 'auto'

})

谢谢大家！

JavaScript HTML iOS 移动版 Mobile-Safari

答： 暂无答案

上一个：链接器命令失败，退出代码为 1（使用 -v 查看调用） |undefined 符号 |Xcode React-原生 WidgetExtension

下一个：vnd.safari：//example.com 在 ios 中是否用作 uri 方案

当我从 Safari iOS 17 激活页面上的模式时，滚动不会被阻止

The scroll does not get blocked when I activate the modal on my page from Safari iOS 17

评论