我有一个 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,当然它不起作用。
知道如何解决吗?
最佳答案
要实现这一点,您可以在要停止滚动行为时将 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>
关于javascript - 用于启用/禁用 div 内容滚动的复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42222953/