javascript - 显示图层时如何避免水平 html 滚动

Question

我有一个 div .layer 使整个页面变暗以突出显示模态，但是当我触发事件时出现问题，无法占据 100% 的屏幕，并且是滚动条原浏览器的删除

有什么奇特的方法可以使 div .layer 在可见时保持页面的原始条形滚动吗？

在智能手机/平板电脑上拍摄事件 .layer").show(); 但在桌面屏幕上，浏览器的原始滚动条被消除了，并且整个 html 文档向右移动，取而代之。

避免 html 向右移动的正确方法是什么？

提前致谢!

HTML:

<div class="layer"></div>
<div class="open-modal">Open</div>

<div class="modal">
  <div class="close-modal">Close</div>
</div>

CSS:

html {width:100%;min-height:100%;margin:0 auto;top:0;left:0;padding:0}
body {top:0;left:0;margin:0;padding:0;min-height:100%}

.layer {
display:none;
position:fixed;
top:0;
left:0;
width:100%;
min-height:100vh;
background:rgba(0,0,0,.9);
z-index:2
}

.modal {display:none;z-index:1}

脚本:

$(document).ready(function(){
  $(".open-modal").click(function(){
    $(".modal,.layer").show();
    $("body").css("overflow","hidden");
  });
    $(".close-modal,.layer").click(function(){
      $(".close-modal,.layer").hide();
      $("body").css("overflow","");
  });
});

Answer 1

您需要摆脱对“溢出”的使用。我在下面包含了一个指向“溢出”的 Mozilla 开发者网络文档的链接，但下面是一个解释正在发生的事情的快速引用。

“隐藏 如有必要，将裁剪内容以适合填充框。 不提供滚动条，并且不支持允许用户滚动(例如通过拖动或使用滚轮)。可以通过编程方式滚动内容(例如，通过设置 offsetLeft 等属性的值)，因此该元素仍然是一个滚动容器。”

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

另外，在单击“打开”和“关闭”循环一次后，如果您再次单击“打开”，“关闭”一词将不会出现。那是因为您没有使用 .show() 方法在单击“打开”时显示该文本。更新了下面的 JavaScript。

JavaScript:

$(document).ready(function(){
  $(".open-modal").click(function(){
    $(".modal,.layer,.close-modal").show();
  });
    $(".close-modal,.layer").click(function(){
      $(".close-modal,.layer").hide();
  });
});