스크롤 요소가 잘못된 요소를 선택했습니다.

Question

이 예제에서 볼 수 있듯이 부트 스트랩 스크롤 경로는 탐색 위에 점프하지만 실제로 예정대로 작동하지 않습니다. 잘못된 항목이 .active 클래스를 얻습니다.

$('.spycontent').scrollspy({ target: 'nav' })

html, body { 
 
    height:100%; 
 
} 
 

 
body > .container, body > .container > .row, .col-xs-6 { 
 
    height:100%; 
 
} 
 
    
 
.col-xs-6 { 
 
    overflow-y:auto; 
 
} 
 

 
.item { 
 
    height:500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
    </script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> 
 
    </script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
    
 
    <div class="container"> 
 
     <div class="row"> 
 
      <nav class="col-xs-6"> 
 
       <ul class="nav nav-pills nav-stacked"> 
 
        <li> 
 
         <a href="#group1">group1</a> 
 
         <ul class="nav nav-pills nav-stacked"> 
 
          <li> 
 
           <a href="#question1">question1</a> 
 
          </li> 
 
          <li> 
 
           <a href="#question2">question2</a> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
        <li> 
 
         <a href="#group2">group2</a> 
 
         <ul class="nav nav-pills nav-stacked"> 
 
          <li> 
 
           <a href="#question3">question3</a> 
 
          </li> 
 
          <li> 
 
           <a href="#question5">question5</a> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
       </ul> 
 
      </nav> 
 
      <div class="col-xs-6 spycontent"> 
 
       <div class="col-xs-12" id="group1"> 
 
        group1 
 
        <div class="row"> 
 
         <div class="col-xs-12 item" id="question1"> 
 
          question1 
 
         </div> 
 
         <div class="col-xs-12 item" id="question2"> 
 
          question2 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div class="col-xs-12" id="group2"> 
 
        group2 
 
        <div class="row"> 
 
         <div class="col-xs-12 item" id="question3"> 
 
          question3 
 
         </div> 
 
         <div class="col-xs-12 item" id="question5"> 
 
          question5 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

메뉴 및 콘텐츠 나에게 완벽한 보면, 왜 잘못된 항목이 강조 표시됩니다?

Answer 1

무슨 일이 있었는지 발견했습니다

내가 다른 열에서 중첩 된 열이 거기를 말했을 때 어떻게 든 브라우저가 나와 함께 동의하지 않았다. TWBS CSS는 어떻게 든 위치를 엉망으로 만듭니다.

$('.spycontent').scrollspy({ target: 'nav' })

html, body { 
 
    height:100%; 
 
} 
 

 
body > .container, body > .container > .row, .col-xs-6 { 
 
    height:100%; 
 
} 
 
    
 
.col-xs-6 { 
 
    overflow-y:auto; 
 
} 
 

 
.item { 
 
    height:500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
    </script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> 
 
    </script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
    
 
    <div class="container"> 
 
     <div class="row"> 
 
      <nav class="col-xs-6"> 
 
       <ul class="nav nav-pills nav-stacked"> 
 
        <li> 
 
         <a href="#group1">group1</a> 
 
         <ul class="nav nav-pills nav-stacked"> 
 
          <li> 
 
           <a href="#question1">question1</a> 
 
          </li> 
 
          <li> 
 
           <a href="#question2">question2</a> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
        <li> 
 
         <a href="#group2">group2</a> 
 
         <ul class="nav nav-pills nav-stacked"> 
 
          <li> 
 
           <a href="#question3">question3</a> 
 
          </li> 
 
          <li> 
 
           <a href="#question5">question5</a> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
       </ul> 
 
      </nav> 
 
      <div class="col-xs-6 spycontent"> 
 
       <div id="group1"> 
 
        group1 
 
        <div class="row"> 
 
         <div class="col-xs-12 item" id="question1"> 
 
          question1 
 
         </div> 
 
         <div class="col-xs-12 item" id="question2"> 
 
          question2 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div id="group2"> 
 
        group2 
 
        <div class="row"> 
 
         <div class="col-xs-12 item" id="question3"> 
 
          question3 
 
         </div> 
 
         <div class="col-xs-12 item" id="question5"> 
 
          question5 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

: 둥지를 제거하면 내 문제를 해결