Question

打开模态后，我制作的网页仍可滚动。我正在尝试在模式打开时禁用滚动条。

html：

<!DOCTYPE html>
<html>
<body>
<canvas id = "gameCanvas" width="500" height="500" style="border:4px solid 
black"></canvas>
<script type = "text/javascript">
var myCanvas = document.getElementById("gameCanvas");
var ctx = myCanvas.getContext("2d");

window.onmousedown = function(event){
  ctx.beginPath();
  ctx.arc(100,75,50,0,2*Math.PI);
  ctx.stroke();
}
</script>
</body>
</html>

用于切换模式的按钮：

<div id="myModal" class="modalBack">
<div class="betaModal">
        <a href="#"><span><i class="fas fa-window-close"></i></span></a>
        <h4>Tell Me Something</h4>
        <label>Your Email:</label> <input type="Email" name="Email" placeholder="example@mail.com"><br>
        <label>Subject:</label> <input type="text" name="title" ><br>
        <label>Message:</label> <input type="message-text" name="Message" placeholder="Write You Message Here ..."><br>
        <input type="submit" name="submit" value="Submit">
    </div>
<a href="#" class="bodyClose"></a>
    </div>

CSS：

<a href="#myModal"><button type="button" class="btn btn-light betaModelBtn">Contact Me</button></a>

Answer 1

目前可能没有HTML-CSS解决方案。

当浏览器将实现:has选择器时，也许可以做到

body:has(> .modalBack:target) {
  overflow: hidden;
}

此刻我会这样做：

<a href="#myModal" onclick="document.body.style.overflow = 'hidden'"><button type="button" class="btn btn-light betaModelBtn">Contact Me</button></a>

打开弹出窗口时删除浏览器的滚动条（仅适用于HTML和CSS）

1 个答案: