지역 사회 배우다 도구 라이브러리 여가

한국어

집 > 웹 프론트엔드 > JS 튜토리얼 > 부트스트랩은 매일 스크롤 모니터링을 배워야 합니다_javascript 기술

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

WBOY

풀어 주다： 2016-05-16 15:10:26

원래의

1288명이 탐색했습니다.

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

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

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

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

ScrollSpy를 사용하려면

아래에 태그가 있어야 합니다.

참고: 또한

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

function ScrollSpy(element, options) {
  this.$body     = $(document.body)
  this.$scrollElement = $(element).is(document.body) &#63; $(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) &#63; $(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" 속성을 추가합니다.

;

추가

　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' });
});

로그인 후 복사

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