JavaScript/CSS - 반응형 리스트와 버튼, 모달 연계

---

다양한 아이템 리스트를 배열로 넣다보면 옆으로 튀어나오거나 여러 줄로 넘어가는 경우가 있다. 이런 경우 리스트를 길이에 맞게 자르고 버튼을 추가하면 깔끔한 결과물을 만들 수 있다.

다음과 같이 간단하게 길이에 맞게 적용할 수 있는데 JavaScript를 사용하면 된다.

window.onload = function () {
  setting_overflow_button();
}

window.onresize = function(event){
  setting_overflow_button();
}

onload와 onsresize를 활용해 화면 크기의 초기와 이후 변하는 길이에 따라 확인해준다.
이후 전체 프레임과 리스트로 나누어 길이를 확인해야 하는데 리스트는 scrollWidth를, 프레임은 offsetWidth를 적용한다.

이후 버튼을 추가하되 두 길이를 비교해서 display를 block과 none을 선택해 넣어주면 된다.
그리고 리스트의 overflow도 변경해주면 간단하게 구현이 가능하다.

document.querySelector("#button");
  if (list.scrollWidth > frame.offsetWidth) {
    list.style.overflow = "hidden";
    button.style.display = "block";
  } else {    
    list.style.removeProperty("overflow");
    button.style.display = "none"    
  }
}