如何啓用按鈕被點擊時顯示的div的滾動

我有在點擊導航欄中的按鈕時顯示的div。 div的高度大於視圖端口/頁面。我想在顯示div時爲頁面啓用滾動。我試過overflow: scroll，但沒有奏效。滾動正在應用到內部div，它顯示在按鈕單擊上，但我想在點擊時應用到頁面。我如何工作？如何啓用按鈕被點擊時顯示的div的滾動

Plunker這裏：https://plnkr.co/edit/JzGCix39dSd1q7KOiNTc?p=preview

代碼：

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

來源

2016-08-20 Satyadev

身體，通常會利用其內容的高度。除非你混淆了任何子元素的定位。

在這種情況下，由於「.topcorner」，您的包裝盒有「位置：固定」。

這是從文檔的正常流程中彈出，導致主體不考慮它的高度。

你真的需要位置：固定在那個元素上嗎？

來源

2016-08-20 05:29:52 hellojebus

沒有必要提到身體的溢出。它會根據內容添加滾動。

嘗試位置：絕對而不是固定。

// 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>

來源

2016-08-20 05:35:08

如何啓用按鈕被點擊時顯示的div的滾動

回答

相關問題