자동으로 스크롤이 내려가는 스크립트!
본문
안녕하세요 아직 경력이 1년도안된 초보 퍼블리셔입니다 ㅎ
공부를 하고있는데.. 검색을해도 잘 모르겠어서요!
http://www.iaragrinspun.com/#/drafts
위 링크와 같이 자동으로 스크롤이 내려가는데, 사용자가 스크롤을 만지면 잠시 멈춰있다가 또 다시 내려갑니다.
저러한 스크립트를 사용하고싶은데~ 어떻게하는건가요?
<script>
function {
document.body.scrollTop = document.body.scrollHeight;
}
</script>
요렇게만하면 그냥 아래로 팍 내려가는데.. 애니메이션을 이용하는건지..
$( document ).ready( function(){
$('#a').animate({
scrollheight;
})
}
이런식으로 하는건 아닌거같아서요 ㅠㅠ 어떻게 하는지 아시는분은 도움을 주시면 감사하겠습니다!!
답변 1
제가 구현한다면 저 기능을 아래 정도로 나누겠어요.
1. 자동으로 스크롤 다운 기능
2. 사용자 휠 동작 시 스크롤 다운 일시 정지 기능
3. 자동 스크롤 다운이 휠 동작을 했을때는 잠시 멈추는 기능
먼저 자동으로 스크롤 다운을 하려면 document.body.scrollTop 이 값을 조정 해야겠지만 계속 동작을 해야하므로 setInterval을 사용해야 할것입니다. 그리고 조금씩 계속 내리는거죠..
그리고 두번째로 사용자가 휠 동작 시 event받는 부분을 찾아서 만드시고 사용자가 휠을 동작했으면 예를 들어 is_stop이라는 전역 변수를(기본 값은 false로 세팅) is_stop = true로 넣으시면 될것 같습니다. 그리고 setTimeout을 사용해서 일정시간 이후에는 is_stop을 false로 바꿔주고요.
마지막으로 두번째 기능이 되었으면 is_stop을 위에서 만든 자동으로 스크롤 다운되는 setInterval안에 넣으시면 됩니다. if!(!is_stop){자동 스크롤 다운 동작}
위에 말씀드린 scroll이벤트, setInterval, setTimeout, 전역변수 이런것들 찾아보고 한번 구현해보세요. 어렵지 않을꺼에요.
네 친절한 설명 너무 감사합니다!! 아직 초보라 한참이 걸릴 것 같지만 정말감사합니다!
하이바네님의 조언으로 혼자 열심히 짜봤는데..
되지를 않아서요 ㅠㅠ
초보라 많이많이 죄송하지만.. 한번만 너그러이 봐주실수 있을까 해서 댓글남겨봅니다.!
https://sir.kr/qa/404320?sfl=mb_id%2C1&lstx=naver_uzyvc2ig