javascript - 用于启用/禁用 div 内容滚动的复选框

Question

我有一个 div，我通过 jquery 向其附加内容 - 它工作正常。

我给 div 添加了一个 css:

#data {
  height: 700px;
  position: absolute;
  left: 0;
  right: 0;
  overflow-y: auto;
  vertical-align: bottom;
  padding-left: 10px;
  margin-bottom: 110px;
  font-family: 'Open Sans', sans-serif;
  color: black;
}

并且div的内容是滚动到底部的。现在我想添加一个复选框 - 如果选中则滚动 div，如果未选中则停止滚动。

我已经尝试从 css 中删除 overflow-y，当然它不起作用。

知道如何解决吗？

Answer 1

要实现这一点，您可以在要停止滚动行为时将 overflow 属性设置为 hidden:

$(':checkbox').change(function() {
  $('div').toggleClass('no-scroll', !this.checked);
}).change();

div {
    width: 100px;
    height: 100px;
    overflow-y: scroll;
}
div.no-scroll { overflow-y: hidden; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  lorem ipsum dolor sit amet consectetur adipscing elit. lorem ipsum dolor sit amet consectetur adipscing elit. lorem ipsum dolor sit amet consectetur adipscing elit. lorem ipsum dolor sit amet consectetur adipscing elit. lorem ipsum dolor sit amet consectetur
  adipscing elit. lorem ipsum dolor sit amet consectetur adipscing elit. lorem ipsum dolor sit amet consectetur adipscing elit. lorem ipsum dolor sit amet consectetur adipscing elit. lorem ipsum dolor sit amet consectetur adipscing elit. lorem ipsum dolor
  sit amet consectetur adipscing elit. lorem ipsum dolor sit amet consectetur adipscing elit. lorem ipsum dolor sit amet consectetur adipscing elit. lorem ipsum dolor sit amet consectetur adipscing elit. lorem ipsum dolor sit amet consectetur adipscing
  elit. lorem ipsum dolor sit amet consectetur adipscing elit. lorem ipsum dolor sit amet consectetur adipscing elit. lorem ipsum dolor sit amet consectetur adipscing elit.
</div>

<label>
  <input type="checkbox">
  Allow scrolling?
</label>