Bootstrap Scrollspy在選項卡內不起作用？

Question

下面是我的代碼，但我知道它沒有什麼不對，因爲它在您將它從標籤中取出時工作正常。也沒有重複的Id，我認爲這可能會導致問題。無論如何，如果任何人有任何想法或解決方法，將是偉大的！

<div id="sampleNavbar" class="navbar navbar-static"> 
    <div class="navbar-inner"> 
     <div class="container" style="width: auto;"> 
      <a class="brand" href="#">Project Name</a> 
      <ul class="nav"> 
       <li><a href="#PA">PA</a></li> 
       <li><a href="#VT">VT</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#uno">uno</a></li> 
         <li><a href="#dos">dos</a></li> 
         <li class="divider"></li> 
         <li><a href="#tres">tres</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 
<div id="scrollspy-example" data-spy="scroll" data-target="#sampleNavbar" data-offset="300" style="height: 200px; overflow-y: scroll;"> 
    <h4 id="PA">PA</h4> 
    <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. 
    </p> 
    <h4 id="VT">VT</h4> 
    <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt. 
    </p> 
    <h4 id="uno">uno</h4> 
    <p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone. 
    </p> 
    <h4 id="dos">dos</h4> 
    <p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt. 
    </p> 
    <h4 id="tres">tres</h4> 
    <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. 
    </p> 
    <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats. 
    </p> 
</div>   

Answer 1

這不是Bootstrap中的錯誤。發生的事情是，當你的頁面加載時，帶有滾動元素的標籤是隱藏的。因此，當滾動插件嘗試在您的滾動div中查找每個<h4 id="foo">的$.position()時，它們會調用返回{top: 0, left: 0}。這就是爲什麼當你滾動時你會看到閃爍的原因;該插件認爲您的所有滾動目標位於相同的位置。

如果你看看documentation for the scrollspy plugin，你會發現它提到，如果你要添加或刪除DOM中的元素，你需要調用.scrollspy('refresh')函數，這樣插件可以重新評估各個滾動目標的位置。

也就是說，你需要做的就是等待帶有滾動內容的標籤被加載，然後調用刷新函數，就像這樣。請注意，我所有單獨的點擊處理程序也合併成一個處理程序

$(function(){ 
    $('.nav-tabs li a').click(function(e) { 
     e.preventDefault(); 
     $(this).tab('show'); 

     // If we are showing the scrollspy tab, let the 
     // plugin refresh itself so it can function properly 
     if(this.id === 'scrotab') { 
      $(this).on('shown',function(){ 
       $('#scrollspy-example').scrollspy('refresh'); 
      }); 
     } 
    }); 
}); 

此外，而不是使用您的<div id="scrollspy-example">元素上data-offset="300"屬性，你需要的元素的position設置爲relative與CSS：

#scrollspy-example { 
    position: relative; 
} 

這裏有一個演示的jsfiddle的作品：

http://jsfiddle.net/GyMYE/3/

Answer 2

添加：

$('#scrollspy-example').scrollspy('process'); 

後：

$('#scrollspy-example').scrollspy('refresh'); 

可以確保你加載這個特殊標籤的正確位置被更新。否則，錯誤的li元素將通過滾動顯示，直到您移動/開始滾動，導致刷新。 '流程'行在製表符加載時執行此操作。