CSS 스크롤바 막대 숨기기

질문 : 스크롤 막대를 숨기지 만 여전히 스크롤 할 수 있음

---

스크롤바를 표시하지 않고 전체 페이지를 스크롤 할 수 있기를 원합니다.

Google 크롬에서는 다음과 같습니다.

::-webkit-scrollbar {
    display: none;
}

그러나 Mozilla Firefox와 Internet Explorer는 그렇게 작동하지 않는 것 같습니다.

나는 또한 이것을 CSS에서 시도했다.

overflow: hidden;

그러면 스크롤바가 숨겨 지지만 더 이상 스크롤 할 수 없습니다.

전체 페이지를 스크롤 할 수있는 동안 스크롤바를 제거 할 수있는 방법이 있습니까?

CSS 또는 HTML 만 사용하십시오.

답변

---

잘 작동하는 테스트입니다.

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

작업 바이올린

Javascript:

스크롤바 너비는 브라우저마다 다르기 때문에 JavaScript로 처리하는 것이 좋습니다. Element.offsetWidth - Element.clientWidth 를 수행하면 정확한 스크롤바 너비가 표시됩니다.

JavaScript 작업 바이올린

OR

위치 사용 Position: absolute ,

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

#child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
}

작업 바이올린

JavaScript 작업 바이올린

정보

이 답변을 바탕으로 간단한 스크롤 플러그인을 만들었습니다.

출처 : https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll