Versuchen, nur div zu scrollen, und nicht ganze Seite

Question

Ich habe alles versucht, aber ohne Erfolg. Ich versuche das zu tun, wenn jemand den rechten Bildschirm scrollt, er scrollt nur ihn und nicht die ganze Seite. Dies ist mein Code:

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<div class="content-container"> 
    <div class="content"> 
    <div>text</div> 
<div>text</div> 
<div>text</div> 
<button id="button"> 
Click me 
</button> 
    </div> 
    </div> 
<div class="new-content"> 
<p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p> 
    </div> 

CSS:

.content { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    text-align: center; 
    width: 100%; 
} 
.content-container { 
    height: 100vh; 
    display: block; 
    background: #ddd; 
    float: left; 
    width: 100%; 
    position: relative; 
} 
.new-content { 
    display: none; 
    overflow: auto; 
    float: left; 
    width: 0; 
    height: auto; 
    background: #f60; 
} 
.new-content.half, 
.content-container.half { 
    width: 50%; 
} 

JS:

$('#button').click(function(){ 
    $('.new-content').toggleClass('half').delay(600).fadeIn(100); 
    $('.content-container').toggleClass('half'); 
}); 

** Hinweis, dass ich wusste, wenn ich height zu 100vh auf .new content anstelle von auto mache wird es behoben werden, aber ich weiß nicht genau die Höhe dieses Teils und deshalb brauche ich es, um automatisch zu sein wird mehr als 100vh sein) * Fiddle.https://jsfiddle.net/adf4uu31/1/

Answer 1

content-container auf position : fixed gesetzt und setzte new-content zu float :right in der CSS-

Answer 2

Wenn ich das richtig verstehen Sie es nicht mögen, im rechten Bereich zu bewegen, so wird nicht groß, aber seit Die Liste kann kürzer sein, aber Sie möchten keinen festen Wert angeben. In diesem Fall können Sie

.new-content { 
    max-height: 100vh; 
} 

Answer 3

Aktualisieren, um die height in der .new-content Klasse 100vh verwenden. Beispiel: https://jsfiddle.net/adf4uu31/2/

Answer 4

Wenn die Höhe des Containers nicht festgelegt ist, erhöht sich die Höhe des div-Elements mit zunehmendem Inhalt, wodurch die Bildlaufleiste vermieden wird. Sie müssen also eine feste Höhe für die Interaktion mit der Bildlaufleiste haben.

$(document).ready(function(){ 
 
$('#button').click(function(){ 
 
    $('.new-content').css({'height' : '100vh' }).toggleClass('half').delay(600).fadeIn(100); 
 
    $('.content-container').toggleClass('half'); 
 
}); 
 
});

.content { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 
.content-container { 
 
    height: 100vh; 
 
    display: block; 
 
    background: #ddd; 
 
    float: left; 
 
    width: 100%; 
 
    position: relative; 
 
    overflow : auto; 
 
} 
 
.new-content { 
 
    display: none; 
 
    overflow: auto; 
 
    float: left; 
 
    width: 0; 
 
    height: auto; 
 
    background: #f60; 
 
} 
 
.new-content.half, 
 
.content-container.half { 
 
    width: 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content-container"> 
 
    <div class="content"> 
 
    <div>text</div> 
 
<div>text</div> 
 
<div>text</div> 
 
<button id="button"> 
 
Click me 
 
</button> 
 
    </div> 
 
    </div> 
 
<div class="new-content"> 
 
<p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p> 
 
    </div>