Question

我正在寻找一个JavaScript代码，除非用户单击按钮，否则该代码可能会使HTML页面无法滚动。例如，我有一个浮动按钮，当用户单击该按钮时，该页面可以正常滚动并且该按钮被隐藏，否则该页面将保持冻结状态（不可滚动）。

我对JavaScript不了解。

Answer 1

您可以通过添加包含overflow: none:规则的CSS类来达到这种效果。

在下面的示例中，我有一个按钮，用于切换body元素上的noScroll CSS类。您可以将该类应用于要防止滚动的任何元素。

function toggleScroll() {
  const element = document.getElementsByTagName("BODY")[0];
  element.classList.toggle('noScroll');
}

.noScroll {
  overflow: hidden;
}


.square {
  height: 100px;
  width: 100px;
  margin: 15px;
  background: red;
}

<button onclick="toggleScroll()">Toggle scroll</button>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

要切换（添加和删除）noScroll CSS类，我使用了classList属性，您可以在此处查看文档：{{3}}

如何使页面无法通过按钮切换向下滚动？

1 个答案: