스크롤 기능을 유지하면서 스크롤 막대 숨기기

overflow:hidden을 사용하여 스크롤 막대를 비활성화했지만 스크롤 기능이 손실되었습니다. 이 문제를 해결하기 위해 CSS 래퍼와 JavaScript 계산을 결합하는 대체 솔루션이 있습니다.

JavaScript 및 CSS 솔루션

다음 CSS 및 JavaScript 코드를 활용하세요.

#wrapper {
  overflow: hidden;
}

// Calculate the width of the element excluding the scrollbar
var elementWidth = document.getElementById("element").scrollWidth;

// Set the wrapper width to match the element width
document.getElementById("wrapper").style.width = elementWidth   "px";

CSS로 스크롤 막대를 숨기고 래퍼의 너비를 실제 콘텐츠 너비와 일치하도록 조정하면 마우스를 통한 스크롤 기능을 유지할 수 있습니다. 또는 키보드.

추가 기술

눈에 보이는 스크롤바 없이 스크롤 가능한 div를 만들려면 동일한 원칙을 사용하세요. Overflow-y: scroll;을 추가하기만 하면 됩니다. 속성을 내부 요소에 추가합니다.