So deaktivieren Sie den vertikalen Bildlauf in der Bootstrap-Spalte

Question

Ich habe zwei Bootstrap-Spalten "links" und "rechts"; Ich möchte die linke Spalte mit dem Bildschirm fixieren und Scroll deaktivieren. aber ich möchte Scroll in der rechten Spalte aktivieren, die mehr Inhalt haben würde. Grundsätzlich möchte ich Posts anzeigen, so dass die Post-Überschrift in der linken Spalte angezeigt würde und der Post-Inhalt würde in der rechten Spalte angezeigt werden Genau wie this. Hinweis: Ich habe overflow-y: hidden; verwendet, aber es hat nicht funktioniert. Dies ist, was ich erreichen möchte: https://blog.squarespace.com/blog/introducing-promotional-pop-ups

dies mein Code für die linke Spalte ist:

<div id="main" class="col-md-6 left-half "> 
    <h2 style="diplay:inline-block">Intrigue</h2> 
    <input id="morearticlesbtn" class="button" type="button" onclick="openNav()" value="More Articles "> 
    <div class="row"> 
    <div class="post-meta col-md-6"> 
     <p>July 18, 2017</p> 
     <p>By: James Crock</p> 
     <a href="#"> Transport</a> 
    </div> 
     <div class="col-md-6"> 
      <div class="line"></div> 
     </div> 
    </div> 


    <div class="title-div"> 
    <h1 class="title">Squarespace Sponsors 2017 D&AD New Blood Awards</h1> 
    </div> 

    <div class="row"> 
     <div class="col-md-9" > 
      <div class="line bottom-line"></div> 
     </div> 
    <div class="col-md-3 bottom-line-text"> 
    <h4>Next</h4> 
    </div> 

    </div> 
    </div> 

Dies ist Code CSS:

.left-half{ 
    height: 100%; 
    overflow-y:hidden; 
    position: fixed; 
    bottom: 0; 
    height: 100vh; 

} 
.left-half h2{ 
    display: inline-block;   
} 

Answer 1

Einfach die linke Spalte fixieren. Sie müssen overflow-y nicht verwenden, es wird verwendet, wenn Sie innerhalb des Elements scrollen müssen.

.fixed {position: fixed !important; top: 0px; left: 0px; bottom: 0px; background: red;} 
 
.scrollable {background: yellow;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="col-xs-3 fixed"> 
 
\t \t Fixed 
 
\t </div> 
 
\t <div class="col-xs-9 pull-right scrollable"> 
 
\t <br /><br /><br /><br /><br />Scrollable 
 
\t <br /><br /><br /><br /><br />Scrollable 
 
\t <br /><br /><br /><br /><br />Scrollable 
 
\t <br /><br /><br /><br /><br />Scrollable 
 
\t <br /><br /><br /><br /><br />Scrollable 
 
\t <br /><br /><br /><br /><br />Scrollable 
 
\t <br /><br /><br /><br /><br />Scrollable 
 
\t <br /><br /><br /><br /><br />Scrollable 
 
\t <br /><br /><br /><br /><br />Scrollable 
 
\t <br /><br /><br /><br /><br />Scrollable 
 
\t </div>

Answer 2

Fügen Sie einfach positon:fixed und height:100% auf der linken Spalte und fügen Sie Daten zu Ihrer rechten Spalte hinzu

https://codepen.io/anon/pen/JJgjqX

Answer 3

Sie können dies erreichen, indem einfach einige CSS:

• Beide Säulen mit einer Höhe Ihres kompletten Ansichtsfenster haben sollte -> Höhe: 100vh;
• Die scrollbare Spalte sollte auch einen Überlauf-y aufweisen, um zu blättern. Hier

ist ein Beispiel: https://jsfiddle.net/kLu69r7t/

.fixed-col { 
    height: 100vh; 
} 

.scrollable-col { 
    height: 100vh; 
    overflow-y: scroll; 
} 

Natürlich müssen Sie die Spalten die jeweiligen Klassen geben.