ボタンをクリックしたときに表示されるdivのスクロールを有効にする方法

navbarのボタンをクリックすると表示されるdivがあります。 divの高さはviewポート/ページ以上です。 divが表示されているときにページのスクロールを有効にしたいボタンをクリックしたときに表示されるdivのスクロールを有効にする方法

私はoverflow: scrollで試しましたが、うまくいきませんでした。ボタンをクリックすると表示される内部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のスクロールを有効にする方法

答えて

関連する問題