부트 스트랩 4 스크롤바에서 이드를 제외하고

Question

나는 하나씩 섹션을 가지고 있으며 그 중간에 나는 거기에 연결된 앵커없이 따로 있습니다. 문제는 이전 섹션에서 scrollspy가 활성화 된 것입니다. 나는 scrollspy가 그 시점에서 아무 것도 보이지 않도록하고, 유효한 앵커가있는 다음 섹션이 나타날 때 다시 시작하고 싶습니다. 나는 심지어 트리거를 잡을 수 없어 내가 Exclude ID in Twitter Bootstrap Scrollspy에서 솔루션을 시도했지만 그들은 부트 스트랩 4에서 작동하지 않을 것 같다, 그 수행하여 작업을한다고 가정

$('#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 
}) 

방법 만 scrollspy 작동하도록 탐색 링크에서의 id가 일치하는 경우 다른 요소를 제외한 스크롤 요소의 ID가 있습니까?

) (부분 도움말) scrollspy 발사 이벤트를 잡는 방법?

Answer 1

이것은 약간 hackish 보일지 모르지만, 이것이 scrollspy 자바 스크립트 자체를 수정하지 않고 원하는 동작을 달성하는 유일한 방법이라고 생각합니다.

여기에있는 아이디어는 옆쪽 요소에 대한 앵커를 만드는 것이지만,이 앵커를 숨기도록하는 것입니다. scrollspy에서는 메뉴 항목의 순서가 중요하지 않으므로 이러한 "불필요한"메뉴 항목을 그룹화하여 숨겨진 하나의 부모 요소로 묶을 수 있습니다. 아래 스 니펫을 확인하십시오. 그런데

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

,이 같은 $ ('몸')와 $ (문서)를 포함하여 스파이 행위를 요소에 activate.bs.scrollspy 이벤트 ( [data-spy="scroll"]) 또는 부모, 수신 할 수 있습니다 :

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