소스 코드 파일 :
scrollspy.js
기능을 구현하십시오
1. 스크롤 영역에있는 해시키가 유효한 위치에 도달하면 내비게이션의 지정된 항목이 연관적으로 설정됩니다.
2. 내비게이션은 .nav> li> 구조 여야하며 HREF 또는 데이터 표적의 해시키는 해시키에 묶어야합니다.
3. 메뉴에 .nav 스타일이 있어야합니다
4. 스크롤 영역의 데이터 표적은 내비게이션 상위 ID와 일치해야합니다 (부모 여야 함)
<div id = "selector"> <ul> <li> <a href = "#one"> one </a> </a> </a> </li> <li> <a href = "#two"> 2 </a> </li> <li> <a href = "#Three"> Three </a> </li> </ul> </divi> heath = "scroll" "selector ="#selector " 오버플로 : 숨겨진; 오버플로 -Y : 자동; " > <h4 id = "one"> ibe </h4> <p> 하나의 특정 내용 <br/> 하나의 특정 내용 <br/> 하나의 특정 내용 <br/> 하나의 특정 내용 <br/> 하나의 특정 내용 <br/> </p> <h4 id = "two"> two "> 두 </h4> <p> 하나의 특정 내용 <br/> <br/ <h4 id ="3 </h4> </h4> </h4> </h4> 내용 <br/> </p> <h4 id = "Three"> Three "> Three </h4> <p> 하나의 특정 내용 <br/> 하나의 특정 내용 <br/> <br/ <h4 id ="3 "> 3 </h4> <p> 하나의 특정 내용 <br/> 하나의 특정 내용 <br/> <br/> <br/> <br/>
소스 코드 분석 :
1. 원리 : 스크롤 컨테이너의 해시키 위치가 컨테이너 상단의 오프셋에 의해 설정된 값 일 때, 내비게이션에서 해당 HREF 강조 표시가 설정됩니다.
2. 스크롤 영역이 본체 인 경우 스크롤링 영역 요소는 창으로 표시됩니다 (생성자에 판단)
이. $ scrollelement = $ (요소) .is (document.body)? $ (창) : $ (요소)
3. getscrolheight : 스크롤 컨테이너의 내용 높이를 가져옵니다 (숨겨진 부분 포함)
이. $ scrollelement [0] .ScrollHeight || Math.Max (this. $ body [0] .ScrollHeight, Document.DocumentElement.scrollHeight)
4. 새로 고침 : 스크롤 컨테이너에 각 해시키의 값을 새로 고치고 저장하십시오.
4.1. 오프셋을 사용하여 기본적으로 포지셔닝 값을 얻으십시오. 스크롤 영역이 창이 아닌 경우 위치를 사용하여 가져 오십시오.
if (! $. iswindow (this. $ scrollelement [0])) {offsetMethod = '위치'오프셋베이스 = this. $ scrollement.scrolltop () // 스크롤 영역에 스크롤 계산에 참여하지 않는 내용이있는 경우 기본 높이를 가져옵니다.4.2. 내비게이션의 해시키에 따르면, 스크롤 영역에서 해시키에 해당하는 오프셋 값을 횡단하고 오프셋 값을 얻습니다.
이. $ body .find (this.selector) .map (function () {var $ el = $ (this) var href = $ el.data ( 'target') || $ el.attr ( 'href') var $ href = /^#./.test (href) && $ (href) // 스크롤 영역에서 해당 요소에 해당하는 요소를 얻습니다. $ href.length && $ href.is ( ': visible') && [[$ href [offsetMethod] (). that.targets.push (this [1])})5. 프로세스 : 스크롤 바 이벤트 트리거 기능은 현재 강조해야 할 탐색 메뉴를 계산하는 데 사용됩니다.
5.1. 스크롤 컨테이너의 스크롤 거리를 가져옵니다.
var scrolltop = this. $ scrollement.scrolltop () + this.options.offset
5.2. 롤링 컨테이너가 굴릴 수있는 최대 높이
// 최대 스크롤 가능 높이 = 스크롤 설정 거리 (오프셋) + 스크롤 컨테이너 컨텐츠 높이 - 스크롤 컨테이너 설정 높이 var maxscroll = this.ofts.offset + scrollheight- this. $ scrollement.height ()
5.3. 스크롤 요소 로직 설정 :
for (i = hengets.length; i-;) {// 모든 오프셋 actietArget! = 대상 [i] // 현재 대상이 activeTarget && scrolltop> = 오프셋인지 판단 [i] // 스크롤 높이> 오프셋 && (오프셋 [i + 1] === undefined <) I+1 요소는 스크롤 높이 && this.Activate (대상 [i]) // i를 현재 활성 항목으로 설정}}보다 크지 않습니다.6. Active : 지정된 내비게이션 메뉴를 강조 표시하도록 설정하십시오
7. Clear : 강조된 메뉴를 모두 지우십시오
위의 기사는 부트 스트랩 소스 코드 ScrollSpy (스크롤 청취)의 분석을 간략하게 논의하는 것이 내가 공유하는 모든 내용입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.