复选框以启用/禁用div内容滚动

Question

I have a div to which I append a content via jquery - it's working fine.

To div I added a 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;
}

and the content of div is scolling to the bottom. Now I'd like to add a checkbox - if checked then scoll the div and stop scrolling if it is unchecked.

I've tried to remove overflow-y from css and of course it doesn't work.

Any idea how I can resolve it ?

Answer 1

To achieve this you can set the overflow property to hidden when you want to stop the scroll behaviour:

 $(':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> 

Answer 2

$('#checkbox').on('change', function() {
 if(this.checked){
 //do the scroll
 }else{
 //undo the scroll
 }
});

you can use this to detect check/uncheck and do your required stuff