ブートストラップ4スクロールスピーキー（idを除く）

Question

私はセクションを次々に持っていて、その中間に私はそれにつながるアンカーなしで脇にあります。問題は、scrollspyが前のセクションでアクティブであることです。その時点でスクロールスピーピーが何も表示されないようにし、有効なアンカーを持つ次のセクションが現れるときに再開したいと思います。私はExclude ID in Twitter Bootstrap Scrollspyからソリューションをしようとしていたが、彼らは、ブートストラップ4で動作していないようで、私もトリガーをキャッチすることはできません、実行して動作するようにするとしている：

ナビゲーションリンクからのIDのが一致しているときにのみscrollspy仕事にする方法

$('#nav-links').on('activate.bs.scrollspy', function() { 
// or $('#nav-links li').on('activate.bs.scrollspy', function() { 
// or $('#nav-links li').on('activate', function(){ 
    alert('sdsd'); // no alert, but scrollspy is working 
}) 

スクロールする要素のIDは他の要素を除いていますか？

a）（部分的なヘルプ）scrollspyの発生イベントをキャッチするにはどうすればいいですか？

Answer 1

これはちょっとハッキリしているように見えるかもしれませんが、これはscrollspy JavaScript自体を変更せずに目的の動作を達成する唯一の方法だと思います。

ここのアイデアは、脇の要素のアンカーも作成しますが、これらのアンカーを非表示にすることです。 scrollspyではメニュー項目の順序が重要ではないため、これらの「不要な」メニュー項目をグループ化して1つの非表示の親要素にラップすることができます。下のスニペットを確認してください。

#content { 
 
    position: relative; 
 
    overflow-y: scroll; 
 
    height: 100vh; 
 
} 
 

 
/* Just basic styling */ 
 
#content > div { 
 
    height: 50vh; 
 
    padding: 15px; 
 
} 
 
#content > div:nth-child(2n) { 
 
    background-color: lightgrey; 
 
} 
 
#content > div:last-child { 
 
    height: 100vh; 
 
} 
 
.aside { 
 
    background-color: pink !important; 
 
}

<div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-3"> 
 
      <nav id="navbar-scollspy" class="navbar navbar-light bg-light flex-column"> 
 
       <a class="navbar-brand" href="#">Navbar</a> 
 

 
       <nav class="nav nav-pills flex-column"> 
 
        <a class="nav-link" href="#section-1">Section 1</a> 
 
        <a class="nav-link" href="#section-2">Section 2</a> 
 
        <a class="nav-link" href="#section-3">Section 3</a> 
 
        <a class="nav-link" href="#section-4">Section 4</a> 
 

 
        <!-- Hidden menu items for asides --> 
 
        <div class="d-none"> 
 
         <a class="nav-link" href="#aside-1">Aside 1</a> 
 
         <a class="nav-link" href="#aside-2">Aside 2</a> 
 
        </div> 
 
       </nav> 
 
      </nav> 
 
     </div> 
 

 
     <div id="content" class="col-9" data-spy="scroll" data-target="#navbar-scollspy"> 
 
      <div id="section-1"> 
 
       <h4>Section 1</h4> 
 
       <p>...</p> 
 
      </div> 
 
      
 
      <div id="aside-1" class="aside"> 
 
       <h4>Aside 1</h4> 
 
       <p>...</p> 
 
      </div> 
 
      
 
      <div id="section-2"> 
 
       <h4>Section 2</h4> 
 
       <p>...</p> 
 
      </div> 
 
      
 
      <div id="aside-2" class="aside"> 
 
       <h4>Aside 2</h4> 
 
       <p>...</p> 
 
      </div> 
 

 
      <div id="section-3"> 
 
       <h4>Section 3</h4> 
 
       <p>...</p> 
 
      </div> 
 

 
      <div id="section-4"> 
 
       <h4>Section 4</h4> 
 
       <p>...</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

ところで、あなたは、このような$（ '体'）と$（文書）を含むスパイ要素（[data-spy="scroll"]）、または任意の親にactivate.bs.scrollspyイベントのために聞くことができます。

$('[data-spy="scroll"]').on('activate.bs.scrollspy', function(event) { 
    console.log('activate.bs.scrollspy', event); 
})