滚动锁定/您点击 - ＆gt;您可以向下滚动

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>