JavaScript
element.scrollIntoView 라는 메소드 배움
element가 표시되는 위치로 스크롤 해줌
함수를 만들고 그 함수를 구동하는데 원하는 argument를 함께 전달하는것을 배우고 실제로 구현함.
<button onclick="scrolll(0)">to A</button>
<button onclick="scrolll(1)">to B</button>
<button onclick="scrolll(2)">to C</button>
<button onclick="scrolll(3)">to D</button>이런식으로 쓰면 scrolll 함수를 한번 정의해놓은걸 4개의 버튼에서 돌려 쓸수 있다.
const boxes = document.getElementsByClassName("box");
function scrolll(boxnum) {
boxes[boxnum].scrollIntoView({
behavior: "smooth",
});
}boxnum 이란 이름은 그냥 내가 임의로 정한것. 무슨 이름이든 상관 없는듯하다. {} 안쪽 코드에 그 arugument가 들어갈 부분에 그냥 boxnum을 써주면 의도대로 작동함.
Trial & Error
상술한 링크를 친구 휴대폰에서 열 경우, 스크롤 다운 했을때 버튼의 일부가 상단바에 가려서 보이지 않는 문제점 발생.
해결방법 아직 못찾음. 내 local과 iphone에서는 정상적으로 작동하는것까지 확인. btnbox 는 position absolute로 제대로 설정되어있다. 임시방편으로 top 픽셀을 좀더 여유있게 준다면 상단바에 가려지는것을 막을수 있을것.
scrollIntoView 구현할때 ~~is not a function 에러
해당 상황에서 많은걸 배웠음. 우선 문제의 원인은 element를 선택하는 방법으로
const boxes = document.getElementsByClassName("box");
를 사용한것. 여기서
boxes.scrollIntoView()는 절대로 실행되지 않는데, 그 이유는 getElementsByClassName이 반환하는 값이 Array이기 때문이다.
그리고 해당 classname을 가진 것이 단 하나일 경우에도 역시나 array로 반환된다. 즉, boxes만 적으면 선택을 하다만 셈.
array이기 때문에 boxes[0] 으로 적었을때 비로소 정상 작동했다.
나아가 해당 classname 을 가지는 것이 여럿이라면 boxes[0], boxes[1]... 이런식으로 정확하게 원하는 대상을 선택할수 있다. 오늘 작성한 코드도 이 방법을 이용한것.
이걸 알아내는데 많이도 헤맸지만 사실 콘솔창 에러메시지에 결정적인 단서가 있었다. 바로 콘솔창에 boxes 라는 객체를 찍어보면
HTML Collection 이라고 표현된다는 점. 아래는 예시.
HTMLCollection(4) [div.box.a, div.box.b, div.box.c, div.box.d]이는 getElementByID 로 선택했을때 찍히는 것과는 확연히 다르다. getElementByID 이걸로 객체를 찍으면 HTMLCollectino 아니라 내가 선택한게
<div class="box d" id="boxd">d</div>그냥 이런식으로 나온다.
