javascript - Scroll-lock/You click->你可以向下滚动

Question

抱歉，这可能是有史以来最糟糕的标题，但我不知道如何调用它。

示例:用户单击按钮，然后才可以向下滚动页面。在此之前，他无法以任何方式向下滚动。

我大约 2 个月前才开始编写代码。我不是专业人士 :D

非常感谢，祝您冬天愉快!

Answer 1

在开始时使用overflow:hidden;，在需要启用滚动时使用overflow:auto;。您可以通过使用 CSS 本身来实现这一点

演示

.button{
  padding:2px;
  cursor:pointer;
  background:red;
  color:white;  
}
input#mycheck{
  display:none;
}
div.inner{
  height:100px;
  margin-top:10px;
  background:yellow;
  overflow:hidden;
}
input:checked ~ div.inner{
  overflow:auto;
}

<div class="outer">
  <label class="button" for="mycheck">enable scrolling</label>
  <input type="checkbox" id="mycheck" />
  <div class="inner">
    enable me first <br/>
    enable me first <br/>
    enable me first <br/>
    enable me first <br/>
    enable me first <br/>
    enable me first <br/>
    enable me first <br/>
    enable me first <br/>
    enable me first <br/>
    enable me first <br/>
    enable me first <br/>
    enable me first <br/>
    enable me first <br/>
    enable me first <br/>
    enable me first <br/>
    enable me first <br/>
    enable me first <br/>
    enable me first <br/>
    enable me first <br/>
    enable me first <br/>
    enable me first <br/>
    enable me first <br/>
    enable me first <br/>
    enable me first <br/>
    enable me first <br/>
  </div>
  </div>