window.addEventListener('scroll', function (){
console.log(window.scrollY); //Y축 스크롤
console.log(window.scrollX); //X축 스크롤
console.log(window.pageYOffset);// Y축 스크롤 레거시
})
// window.scrollTo(x,y) //강제로 스크롤 하기
// window.scrollBy(x,y) //현재위치에서 x,y만큼 스크롤 하기
//jQury
$(window).on('scroll', function() {
$(window).scrollTop() // 현재 위치 출력
$(window).scrollTop(100) // 현재 위치에서 100만큼 이동
})
<div class="lorem" style="width: 200px; height: 100px; overflow-y: scroll">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae voluptas voluptatum minus praesentium fugit debitis at, laborum ipsa itaque placeat sit, excepturi eius. Nostrum perspiciatis, eligendi quae consectetur praesentium exercitationem.
</div>
window 스크롤은 배웠는데 아직 div 스크롤은 안배웠음
// scroll 내린양 + div 화면에 보이는 높이 == div 실제 높이가 되면 alert 띄워라
$('.lorem').on('scroll', function(){
var scroll = document.querySelector('.lorem').scrollTop;
var height = document.querySelector('.lorem').scrollHeight;
var realHeight = document.querySelector('.lorem').clientHeight;
console.log(scroll , height , realHeight);
if(scroll + realHeight >= height){
alert('정독완료');
}
});
