자바스크립트로 클릭하면 타겟이 있는 화면으로 스크롤 이동하게 하기

scrollIntoView 내장함수 알아보기

모바일에서는 화면이 작아서 컨테츠로인한 스크롤이 어쩔 수 없이 많이 생기게 됩니다. 그렇기 때문에 '약관 동의'와 같은 중요한 컨텐츠들이 밑에 있을때 그 내용을 확인을 위해서 체크 박스를 클릭하면 아래의 컨텐츠가 화면에 딱 보일 수 있도록 해달라는 오더를 받았습니다. 저는 'scorllIntoView'라는 자바스크립트 내장함수로 간단하게 해결할 수 있었지만 다른 방법들에 대해서도 공부차원에서 살펴보려고 합니다.

 

타겟을 화면 가운데로 오게 하는 방법은 여러가지가 있습니다. 

 

 

1. <a href="#target"></a> <div id="target"></div>

a태그의 속성 href와 타겟의 id를 이용하는 방법입니다. 

<a href="#target">go target</a>
<div>block</div>
<div id="target">target</div>
<!-- <div>block</div> -->

이미지 왼쪽 1col, 2col은 마지막 div가 주석처리 됐을 때의 모습이고 오른쪽은 마지막 div 주석처리를 풀었을 때입니다. 밑에 컨텐츠가 더 있을 경우 target의 위치는 화면의 가장 윗부분 body top:0 의 위치가 되며 그렇지 않은 경우 스크롤의 가장 마지막에 위치하게 됩니다. 

 

그렇지만 저는 마크업된 태그가 a태그가 아니었기 때문에 마크업을 바꿀 수는 없는 상황이었기 때문에 scrollIntoView라는 내장 함수를 사용했습니다.

 

2. scrollIntoView()

a태그의 속성 href와 타겟의 id를 이용하는 방법과 효과는 같습니다. 업무 화면은 보안이 심해서 캡처해도 가지고 나갈 수도 없고 사진으로 찍어도 올릴 시 문제가 될 수 있어 시각적 자료는 남기지 않았지만 코드는 공부차 남겨봅니다. 

var checkbox = document.querySelectorAll('input[type=checkbox]')[0]; //체크박스 개수가 여러개일 경우 [0]을 지우고 for문 사용
 
if (checkbox) {
    var target = checkbox.parentNode.parentNode.ParentNode; 
    //var target = document.getElementById('accordionA')과 동일
 
    checkbox.addEventListener('click', function(){
        target.scrollIntoView(true);
    });
};

scrollIntoView()의 옵션

scrollIntoView는 boolean 값을 넣어서 scrollIntoView(true) 혹은 scrollIntoView(false)로 사용될 수 있습니다. true 와 false 값에 따라서 taget의 가장 윗부분으로 focus를 맞출것인지 가장 아랫부분으로 focus를 맞출것인저 결정합니다.

true: 타겟의 가장 윗 부분(top: 0)으로 포커스가 맞춰집니다.

false: 타겟의 가장 아랫 부분(bottom: 0)으로 포커스가 이동합니다.

 

그 밖에도 block, inline, behavior 로 옵션 값을 따로 줄 수 있습니다.

block : 수직 요소에 대한 옵션입니다. start, center, end, nearest 이 네가지를 옵션으로 줄 수 있습니다. start는 타겟의 top: 0 위치로, center는 가운데로, end는 bottom: 0의 위치로 그리고 nearest는 만약 타켓의 아랫 부분이 화면에 위치하고 있다면 타겟의 조상 요소의 top: 0으로 위치하게 되며 만약 타켓의 위에 위치하고 있다면 타겟의 조상요소의 bottom: 0으로 포커스가 가게 되며 이미 화면에 타겟이 보인다면 그대로 둡니다.

ex) scrollIntoView({block: "end"});

 

inline: 수평 요소에 대한 옵션입니다. block 옵션과 마찬가지로 start, center, end, nearest로 설정할 수 있습니다. start는 left: 0의 위치로 center는 가운데로 그리고 end는 right: 0의 위치로 이동하게 되며 nearest는 만약 화면이 타겟의 오른쪽에 위치하고 있다면 타겟의 조상요소의 left: 0에 위치하게 될 것이고 화면이 타겟의 왼쪽에 있다면 타겟의 조상 요소의 right: 0에 위치하게 될 것이며 이미 화면안에 타켓이 보인다면 제 자리를 유지할 것입니다.

ex) scrollIntoView({inline: "left"});

 

behavior: 움직임을 더 부드럽게 만들고 싶다면 auto와 smooth 중 smooth를 따로 적어주시면 됩니다. auto가 defualt 값입니다.

ex) scrollIntoView({behavior: "smooth"});

 

option default 값

scrollIntoView(true): scrollIntoViewOptions: {block: "start", inline: "nearest", behavior: "auto"}

scrollIntoView(flase): scrollIntoViewOptions: {block: "end", inline: "nearest", behavior: "auto"}

 

여러 옵션을 한번에 사용할 때

ex) scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});

 

호환성 확인

https://developer.mozilla.org/ko/docs/Web/API/Element/scrollIntoView

element.scrollIntoView

IE와 사파리에서는 옵션값을 사용하지 못하니 참고해주세요.