So aktivieren Sie Scroll für div, die angezeigt wird, wenn die Schaltfläche geklickt wird

Ich habe Div, die angezeigt wird, wenn auf eine Schaltfläche in Navbar geklickt wird. Die Höhe des Divs ist mehr als der View Port/Seite. Ich möchte Scroll für die Seite aktivieren, wenn das Div angezeigt wird.So aktivieren Sie Scroll für div, die angezeigt wird, wenn die Schaltfläche geklickt wird

Ich versuchte mit overflow: scroll, aber es hat nicht funktioniert. Der Bildlauf wird auf das interne div angewendet, das beim Klicken auf die Schaltfläche angezeigt wird, aber auf die Seite angewendet werden soll, wenn darauf geklickt wird. Wie arbeite ich das?

Plunker hier: https://plnkr.co/edit/JzGCix39dSd1q7KOiNTc?p=preview

Code:

<body> 
    <nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right"> 
      <li> 
       <a href="#" id="showKoo" onclick="showKoo()">Tool bar</a> 
      </li> 
      </ul> 
     </div> 
     </div> 
    </nav> 
    <div class="mainBorder topcorner complete_width complete_height" id="box" style="display: block; background-color:red"> 
     <h4> SOME CONTENT</h4> 
    </div> 
    </body>

css:

body{ 
    overflow: scroll; 
} 

.centered_div{ 
    margin: 0 auto; 
} 

.mainBorder{ 
    border: 1px #B2B9BA solid; 
    overflow:scroll; 
} 

.topcorner{ 
    position:fixed; 
    top:41px; 
    right:30px; 
} 

.complete_width { 
    min-width: 360px; 
    max-width: 360px; 
} 

.complete_height { 
    min-height:640px; 
    max-height:640px; 
}

js:

function showKoo() { 
    $('#box').toggle(); 
}

Quelle

2016-08-20 Satyadev

Körper wird in der Regel die Höhe des Inhalts übernehmen. SELBST, wenn Sie sich mit der Positionierung irgendwelcher Kindelemente herumschlagen.

In diesem Fall hat Ihre Box "position: fixed", wegen ".topcorner".

Dadurch wird es aus dem normalen Fluss des Dokuments herausgedrückt, wodurch der Körper seine Höhe nicht berücksichtigt.

Benötigen Sie wirklich Position: fest auf diesem Element?

Quelle

2016-08-20 05:29:52 hellojebus

Es ist nicht notwendig, Überlauf für Körper zu erwähnen. Es hängt Scroll basierend auf dem Inhalt an.

Versuchsposition: absolut statt fest.

// Code goes here 
 

 
function showKoo() { 
 
    $('#box').toggle(); 
 
}

/* Styles go here */ 
 

 

 
body{ 
 
    position:relative; 
 
} 
 

 
.centered_div{ 
 
    margin: 0 auto; 
 
} 
 

 
.mainBorder{ 
 
    border: 1px #B2B9BA solid; 
 
    
 
} 
 

 
.topcorner{ 
 
    position:absolute; 
 
    top:41px; 
 
    right:30px; 
 
} 
 

 
.complete_width { 
 
    min-width: 360px; 
 
    max-width: 360px; 
 
} 
 

 
.complete_height { 
 
    min-height:640px; 
 
    max-height:640px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> 
 
    <link data-require="[email protected]" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <nav class="navbar navbar-default navbar-fixed-top"> 
 
     <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
     </div> 
 
     <div class="navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
      <li> 
 
       <a href="#" id="showKoo" onclick="showKoo()">Tool bar</a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </nav> 
 
    <div class="mainBorder topcorner complete_width complete_height" id="box" style="display: block; background-color:red"> 
 
     <h4> SOME CONTENT</h4> 
 
    </div> 
 
    </body> 
 

 
</html>

Quelle

2016-08-20 05:35:08

So aktivieren Sie Scroll für div, die angezeigt wird, wenn die Schaltfläche geklickt wird

Antwort

Verwandte Themen