부트스트랩은 매일 스크롤 모니터링을 배워야 합니다_javascript 기술

이 글에서는 누구나 쉽게 배울 수 있는 부트스트랩 스크롤링 모니터링을 소개합니다.

1. 현재 Scrollspy에서는 활성 링크를 적절하게 강조 표시하기 위해 Bootstrap 탐색 구성 요소를 사용해야 합니다.

---- 스크롤 모니터링을 사용하는 경우 탐색 모음은 class="nav"의 탐색 구성 요소를 사용해야 합니다.

다음은 소스코드의 한 부분으로, 빨간색으로 표시된 부분이 이를 증명합니다.

ScrollSpy를 사용하려면

태그를 사용해야 하며,
• 아래에 태그가 있어야 합니다.

  참고: 또한

  태그를 다른 컨테이너(예: div)에 추가해야 합니다. 상위 컨테이너 속성(섹션 4에서 소개됨)

  function ScrollSpy(element, options) {
    this.$body     = $(document.body)
    this.$scrollElement = $(element).is(document.body) ? $(window) : $(element)
    this.options    = $.extend({}, ScrollSpy.DEFAULTS, options)
    this.selector    = (this.options.target || '') + ' .nav li > a'
    this.offsets    = []
    this.targets    = []
    this.activeTarget  = null
    this.scrollHeight  = 0
  
    this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))
    this.refresh()
    this.process()
   }
  

  2. Navbar 링크에는 확인 가능한 ID 대상이 있어야 합니다. 예를 들어 home ;.

  --- 간단히 말하면

  • 아래의 태그에는 href="#id" 속성이 있어야 하며, 스크롤되는 콘텐츠에는 해당 태그; 콘텐츠가 태그로 스크롤되면 해당
  • 가 자동으로 선택된.

    --실제로 웹 개발을 해본 친구들은 알 것이다. 이전 버전의 HTML에서는 앵커 태그를 주로 사용했지만 HTML5에서는 앵커 태그를 대신 사용했습니다. name 속성은 id 속성을 사용하세요

     ScrollSpy.prototype.activate = function (target) {
      this.activeTarget = target
    
      this.clear()
    
      var selector = this.selector +
       '[data-target="' + target + '"],' +
       this.selector + '[href="' + target + '"]'
    
      var active = $(selector)
       .parents('li')
       .addClass('active')
    
      if (active.parent('.dropdown-menu').length) {
       active = active
        .closest('li.dropdown')
        .addClass('active')
      }
    
      active.trigger('activate.bs.scrollspy')
     }
    

    3. 구현 방법에 관계없이 스크롤스파이는 감시 중인 요소에 대해 position:relative를 사용해야 합니다. 대부분의 경우 이는

    이외의 요소를 스크롤하는 경우입니다. ;, 높이를 설정하고 Overflow-y: 스크롤을 적용했는지 확인하세요.

    --- Body의 스크롤을 모니터링하는 경우 Body에 position:relative 스타일을 추가해야 합니다.

    --- 모니터링 대상이 Body가 아닌 다른 요소인 경우(이 방법은 일반적인 것 같음) 세 가지 스타일을 추가해야 합니다. position:relative;height:500px;overflow -y :스크롤;

    ScrollSpy.prototype.refresh = function () {
      var that     = this
      var offsetMethod = 'offset'
      var offsetBase  = 0
    
      this.offsets   = []
      this.targets   = []
      this.scrollHeight = this.getScrollHeight()
    
      if (!$.isWindow(this.$scrollElement[0])) {
       offsetMethod = 'position'
       offsetBase  = this.$scrollElement.scrollTop()
      }
    

    4. 상단 표시줄 탐색에 스크롤스파이 동작을 쉽게 추가하려면 감시하려는 요소에 data-spy="scroll"을 추가하세요(대개는

    ). 모든 Bootstrap .nav 구성 요소의 상위 요소 ID 또는 클래스가 있는 속성.

    --- 스크롤되는 콘텐츠의 라벨에 data-spy="scroll" 속성과 data-target 속성을 추가해야 합니다

    data-spy 속성은 모니터링할 요소를 지정하고, data-target 속성은 스크롤 중에 제어해야 하는 탐색 강조 표시를 지정합니다

    아래 초기화 소스 코드를 다시 보면 빨간색으로 표시된 위치인 this.options.target의 값이 스크롤링 콘텐츠 요소의 data-target 값과 같다고 생각하실 수 있습니다. .nav를 정의하기 전에 컴포넌트를 만들 때 .nav를 다른 컨테이너(예: div)에 넣어야 하며 컨테이너에는 id 속성이 있어야 합니다(여기서 data-target과 동일한 값을 설정해야 함). ).

    function ScrollSpy(element, options) {
      this.$body     = $(document.body)
      this.$scrollElement = $(element).is(document.body) ? $(window) : $(element)
      this.options    = $.extend({}, ScrollSpy.DEFAULTS, options)
      this.selector    = (this.options.target || '') + ' .nav li > a'
      this.offsets    = []
      this.targets    = []
      this.activeTarget  = null
      this.scrollHeight  = 0
    
      this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))
      this.refresh()
      this.process()
     }
    

    5. CSS에 position:relative;를 추가한 후 JavaScript를 통해 scrollspy를 호출합니다.

    $('yourTag').scrollspy({ target: 'nav-parent-div-id' })
    -- yourTag는 스크롤 콘텐츠를 전달하는 요소의 ID이고, nav-parent-div-id는 .nav 요소의 상위 요소 ID입니다(즉, data-target 값 )

    복잡한 내용을 많이 썼는데, 다음은 몇 가지 간단한 단계를 요약한 것입니다.

    　1. 태그 추가

    2. 태그 내에 .nav 구성 요소를 추가하고 li->a

    에 href="#tag" 속성을 추가합니다.

    　3.

    ; 추가

    　4. 스타일 추가 #content{height:500px;overflow-y:scroll;opsition:relative;}

    5. $('#content').scrollspy({target:'scrollSpyID'});

    스크립트 추가

    마지막으로 밤 조금:

    <style type="text/css">
        #body {
          position: relative;
          height: 500px;
          overflow-y: scroll;
        }
      </style>
    

    <div id="sc">
        <ul class="nav nav-pills">
          <li class="active">
            <a href="#A">第一段</a>
          </li>
          <li>
            <a href="#B">第二段</a>
          </li>
          <li>
            <a href="#C">第三段</a>
          </li>
        </ul>
    
      </div>
    
    

    <div id="body" class="container-fluid" data-spy="scroll" data-target="#sc">
    
    　　<a id="A">第一段</a><br />
    
    　　　　<!-- 这里要有很多内容，至少要保证可以滚动 -->
    
    　　<a id="A">第二段</a><br />
    
    　　　　<!-- 这里要有很多内容，至少要保证可以滚动 -->
    
    　　<a id="A">第三段</a><br />
    
    　　　　<!-- 这里要有很多内容，至少要保证可以滚动 -->
    
    </div>
    
    

    $(function () {
      $('#body').scrollspy({ target: '#sc' });
    });
    

    위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.