>웹 프론트엔드 >CSS 튜토리얼 >마우스 및 키보드 스크롤을 허용하면서 스크롤 막대를 숨기는 방법은 무엇입니까?

마우스 및 키보드 스크롤을 허용하면서 스크롤 막대를 숨기는 방법은 무엇입니까?

Susan Sarandon
Susan Sarandon원래의
2024-11-09 10:22:02699검색

How to Hide Scrollbars While Still Allowing Mouse and Keyboard Scrolling?

마우스/키보드 스크롤을 유지하면서 스크롤 막대 숨기기

이 질문은 중복으로 표시되었지만 원래 스레드에서는 해당 질문을 적절하게 해결하지 못했습니다. 마우스로 스크롤을 활성화하는 동안 스크롤 막대를 숨기는 특정 문제 또는 키보드.

원래 질문:

마우스나 키보드를 사용한 스크롤을 허용하면서 스크롤 막대를 숨길 수 있나요?

CSS 오버플로: 숨겨진 제한:

CSS 속성 오버플로: Hidden을 사용하면 스크롤 막대를 숨길 수 있지만 스크롤 기능도 완전히 비활성화됩니다.

jQuery 솔루션(원본):

원래 스레드에서는 jQuery를 제안했습니다. 스크롤 막대 없이 텍스트 영역의 너비를 동적으로 측정하고 이에 따라 래퍼 div의 너비를 설정하는 솔루션입니다. 이는 보이는 스크롤 막대 없이 스크롤 가능한 div의 환상을 만듭니다.

// get the width of the textarea minus scrollbar
var textareaWidth = document.getElementById("textarea").scrollWidth;

// width of our wrapper equals width of the inner part of the textarea
document.getElementById("wrapper").style.width = textareaWidth + "px";

JavaScript 솔루션(jQuery 제외):

또는 동일한 원칙을 적용할 수 있습니다. jQuery:

document.getElementById("wrapper").style.overflow = "hidden";

// get the width of the textarea minus scrollbar
var textareaWidth = document.getElementById("textarea").scrollWidth;

// width of our wrapper equals width of the inner part of the textarea
document.getElementById("wrapper").style.width = textareaWidth + "px";

업데이트:

CSS와 JavaScript를 사용하여 스크롤 막대 없이 스크롤 가능한 div를 만드는 데에도 동일한 원칙을 사용할 수 있습니다.

위 내용은 마우스 및 키보드 스크롤을 허용하면서 스크롤 막대를 숨기는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.