Checkbox zum Aktivieren/Deaktivieren der Bildlauffunktion des div-Inhalts

Question

Ich habe ein div, an das ich einen Inhalt über jquery angehängt habe - es funktioniert einwandfrei.

DIV ich eine CSS hinzugefügt:

#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; 
} 

und der Inhalt des div ist Scolling nach unten. Jetzt möchte ich ein Kontrollkästchen hinzufügen - wenn aktiviert, scrollen Sie das div und stoppen Sie zu scrollen, wenn es nicht markiert ist.

Ich habe versucht, Überlauf-Y von CSS zu entfernen und natürlich funktioniert es nicht.

Irgendeine Idee, wie ich es lösen kann?

Answer 1

Um dies erreichen Sie die overflow Eigenschaft auf hidden festlegen können, wenn Sie das Scroll-Verhalten stoppen wollen:

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

Sie können dieses verwenden, aktivieren/deaktivieren zu erkennen und Mach dein benötigtes Zeug