코딩짜는 일상

[Javascript+html] scrollTo 안 먹히는 이유 - 찔끔 움직이고 끝나는 이유 / 움직일 스크롤 특정 본문

IT/Javascript&Jquery

[Javascript+html] scrollTo 안 먹히는 이유 - 찔끔 움직이고 끝나는 이유 / 움직일 스크롤 특정

Remily 2022. 7. 29. 19:07
반응형

(업데이트) html, body 둘다 overflow를 먹인채로 scrollTo를 써야하는 경우가 있어서...

좀 더 고심끝에 새로운 방법을 찾았습니다! - 20220802

 

 

 

#1 원인

스크립트가 동작하지 않는다면 가장 먼저 생각해볼 것은 함수 function 이 제대로 동작하지 않는 것입니다.

함수 안에 console.log('확인문구')를 입력해서 console에 문구가 찍히는지 확인해보면 알 수 있죠.

 

하지만 문구가 찍히는데도 scrollTo가 안 먹힌다?

 

1. 이동해야 할 위치값을 못 받음
2. scrollTo로 움직일 스크롤을 잘못 특정함

 

원인은 이 둘 중에 하나일 것입니다.

 

 

 

#2 구조

저는 요소를 클릭하면 javascript를 이용해 지정한 페이지로 이동하는 웹 페이지를 만들었습니다.

 

<html>
<head>
    <style>
    html, body{width: 100vw; height: 100vh; overflow-x: hidden;}
    body div{width: 1080px; margin: 0 auto; height: 100vh;}
    </style>
</head>
<body>
    <div id="section1">
       <div onclick="move_to_page('#section2');">2번으로 이동</div>
       <div onclick="move_to_page('#section3');">3번으로 이동</div>
       <div onclick="move_to_page('#section5');">5번으로 이동</div>
    </div>
    <div id="section2"></div>
    <div id="section3"></div>
    <div id="section4"></div>
    <div id="section5"></div>
    <script>
    	function move_to_page(moveto){
          setTimeout(function() {
            var PageLocation = document.querySelector(moveto).offsetTop;
            window.scrollTo({top: PageLocation, behavior: 'smooth'});
          }, 70);
        }
    </script>
</body>
</html>

구조는 다음과 같이 한 화면에 꽉 차는 섹션이 5개 있고

1번 섹션에 각각의 버튼요소가 있어서, 누르면 해당 섹션으로 스크롤이 이동하는 구조였습니다.

 

문제는 아무리 버튼을 눌러도 스크롤이 1번섹션에서 벗어나질 못하고 찔끔 움직이고 말았다는 점인데요.

 

scrollTo의 top값을 5000같은 숫자로 넣어도 같은 증상인 것으로 보아 스크롤 문제라고 생각했습니다.

 

 

 

#3-1 해결

익스플로러 창을 줄였다 늘였다 하면서 유심히 봤더니

우측에 수직이동 스크롤이 2개가 중첩으로 생겨있는 것을 발견했습니다.

 

하나는 html의 스크롤, 다른 하나는 body의 스크롤이었죠.

 

CSS에서 html, body { overflow-x: hidden; } 으로

상위, 하위요소 둘 다에 적용시킨 것이 원인이었습니다.

스크립트가 어느쪽 스크롤을 움직여야할지 헷갈렸던거죠!

 

 

여기서 가장 간단한 방법은 위 문구를 삭제하고 html에만 overflow-x를 hidden으로 설정하는 것입니다.

 

하지만 제 경우, 창을 줄이면서 창 크기를 넘어가는 이미지 부분이 생기고

이 때문에 좌우 이동스크롤이 생기기 때문에 body의 overflow-x를 포기할 수 없었습니다.

 

거기다 디자인 시안때문에 이미지 사이즈를 변경할 수도 없었죠.

 

#3-2 해결

그래서 떠올린 생각이,

 

[[ 스크롤 1개에만 특정해서 scrollTo를 실행하도록 하면 안될까? ]]

 

<script>
	function move_to_page(moveto){
        setTimeout(function() {
            var PageLocation = document.querySelector(moveto).offsetTop;
            document.body.scrollTo({top: PageLocation, behavior: 'smooth'});
          }, 70);
	}
</script>

결과는 성공!!

 

결론은 제목과 같은 증상이 있을 때

scrollTo를 특정 요소를 지정해서 쓰자! 입니다!!

 

반응형
저작자표시

'IT > Javascript&Jquery' 카테고리의 다른 글

[Javascript] 가격 표시, 천단위 콤마 정규식 + 숫자만 가져오기 정규식  (1) 2024.01.24
[javascript, ajax] 함수에서 ajax 결과값이 반환되지 않을 때_async 옵션  (0) 2023.10.19
[Javascript] console.log 동작 안 하는 이유 - filter  (0) 2023.06.26
[Javascript & jQuery] 애니메이션 메뉴 접기/펴기(collapse) - 아코디언 메뉴  (0) 2022.09.29
[Javascript] confirm : alert 확인 or 취소 구현하기  (0) 2022.06.30
'IT/Javascript&Jquery' Related Articles more