2019. 1. 27. 13:18
반응형
참고로 div 안에서 overflow-y: scroll을 통한 부분적인 감지는 안되고 윈도우 창 전체 범위에서만 가능해보인다.
원본 링크: https://github.com/thesmart/jquery-scrollspy
위 링크에서 scrollspy.js를 다운받아 아래의 소스와 같은 폴더에 두고 테스트하면 결과를 볼 수 있다.
참고로 결과를 보려면 개발자도구 콘솔을 확인해야 한다.
크롬에서 단축키 F12를 누르면 오른쪽에 콘솔창이 나타난다.
아래 예제에서는 enter, exit 두 경우 모두 이벤트를 걸었는데 자기에게 필요한 것만 걸어주면 된다.
위 깃헙 링크에 보면 winSize 경우도 나와있었는데 그건 아직 안해봤다.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="scrollspy.js"></script>
<style>
#big-box {
height: 300px;
width: 500px;
/* overflow-y: scroll; */
}
#big-box div {
height: 1000px;
}
</style>
</head>
<body>
<div id="status"></div>
<div id="big-box">
<div style="background-color:lightblue">1</div>
<div style="background-color:lightcoral">2</div>
<div style="background-color:lightgreen">3</div>
<div style="background-color:lightpink">4</div>
<div style="background-color:lightskyblue">5</div>
</div>
<script>
$(document).ready(function(){
$("#big-box>div").on("scrollSpy:enter", function(){
console.log("scrollSpy:enter " + $(this).text());
}).on("scrollSpy:exit", function(){
console.log("scrollSpy:exit " + $(this).text());
}).scrollSpy();
});
</script>
</body>
</html>반응형
'dev' 카테고리의 다른 글
| 텔레그램 개인 봇 만들기 (1) | 2019.02.20 |
|---|---|
| [Vue.js] 구분 문자 변경하기 (0) | 2019.02.15 |
| [Linux] XMacro - 우분투 마우스, 키보드 매크로 만들기 (0) | 2019.02.01 |
| [Python] 텍스트파일 한줄씩 출력하기 (0) | 2019.01.30 |
| [Linux] Ubuntu16 python3.6 설치 방법 (1) | 2019.01.22 |
| [Python] csv 파일 읽기 (0) | 2019.01.14 |
| [Java] 자바 command line 실행 (jar 만들어서) (0) | 2019.01.09 |
| [Bitcoin] 암호화폐 지갑 주소 백업 및 import (0) | 2019.01.08 |