[ 원페이지 스크롤 + 일반 스크롤 ] 화나서 직접 만든 원페이지 스크롤 2탄

2019/08/01 - [웹 프로그래밍] - [ JS / jQuery ] 화나서 직접 만든 원페이지 스크롤

[ JS / jQuery ] 화나서 직접 만든 원페이지 스크롤

 

제 블로그에서 많은 요청을 차지하고 있는 원페이지 스크롤을 이제서야...하하 다시 다룬다.

크게 바뀐점은 없다 여전히 하드 코딩이고 버그가 있다.

예전 코드가 벌써 1년전이라 다시 만들어볼겸 + 원페이지 스크롤 부분과 일반 스크롤을 섞어서 가능하게끔 해놨다.

그래서 원랜 코드좀 이쁘게 라이브러리 형태로 만들려고 했는데 여전히 빡세서^^...( 실력이 그대론가보다 )

리펙토링도 전혀 안되어 있다😓

 

 

<div id="onepage">
    <section class="s1" opage>section01</section>
    <section class="s2" opage>section02</section>
    <section class="s3" opage>section03</section>

    <div style="height:2000px"></div>

    <section class="s4" opage>section04</section>			
    <section class="s5" opage>section05</section>

    <div style="height:2000px"></div>

    <section class="s4" opage>section04</section>			
    <section class="s5" opage>section05</section>
</div>

태그에 opage라고 적어주면 원페이지 스크롤이 되도록 해놨다.

현재 크롬만 정상 작동한다.

IE에서 잘 안되는 이유는 window.scrollY가 IE에서 안돌아가도라...망할것

그래서 브라우저 체크이후 사용 함수를 바꿔 줬지만 떨림이 있어 그냥 빼버렸다.

 

 

자바스크립트는 워낙 개판이라... 깃주소만 우선 첨부해두고 참고만 하셨으면 좋겠다.

스크롤 이벤트에서 아래 친구를 기준으로 전과 후 두파트로 나뉜다.

event.preventDefault();
event.stopPropagation();

스크롤 이벤트를 막기 전에 해당 페이지가 원페이지인지 일반 페이지인지 체크하는 예외처리부분들

이후에는 원페이지 스크롤을 하는 부분들...

 

사실 코드 어떻게 다듬어야할지 막막하다 🤯🤯 

코드는 더러워도 어찌저찌 조금은 업그레이드 했다는거에 만족하며 ㅠㅠ...휴...

코드 이쁘게 정리하는데 도움주실분 계신가요?^p^....

 

 

아래 깃허브 주소다. 

https://github.com/hyeon-min-roh/opage

hyeon-min-roh/opage