CSS를 사용하여 스크롤 막대를 숨길 수 있습니까? 어떻게 하시겠습니까?

다음 overflow: hidden;과 같이 body 태그를 설정하십시오 .

<style type="text/css">
    body {
        overflow: hidden;
    }
</style>

위의 코드는 가로 및 세로 스크롤 막대를 숨 깁니다.

세로 스크롤 막대 만 숨기려면 overflow-y다음을 사용하십시오 .

<style type="text/css">
    body {
        overflow-y: hidden;
    }
</style>

가로 스크롤 막대 만 숨기려면 overflow-x다음을 사용하십시오 .

<style type="text/css">
    body {
        overflow-x: hidden;
    }
</style>

참고 : 스크롤 기능도 비활성화됩니다. 스크롤 막대를 숨기고 싶지만 스크롤 기능을 숨기려면 아래 답변을 참조하십시오.

WebKit은 표준 CSS 규칙으로 숨길 수있는 스크롤바 의사 요소를 지원합니다.

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

모든 스크롤 막대를 숨기려면

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

복원에 대해 잘 모르겠습니다. 작동했지만 올바른 방법이 있습니다.

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

물론을 사용 width: 0하면 언제든지 쉽게 복원 할 수 width: auto있지만 width가시성 조정에 대한 학대 팬은 아닙니다 .

Firefox 64는 이제 기본적으로 실험적인 스크롤 막대 너비 속성 을 지원합니다 (63은 구성 플래그를 설정해야 함). Firefox 64에서 스크롤바를 숨기려면 :

#element {
    scrollbar-width: none;
}

현재 브라우저가 유사 요소 또는를 지원하는지 확인하려면 scrollbar-width다음 코드를 사용해보십시오.

.content {
  /* These rules create an artificially confined space, so we get
     a scrollbar that we can hide. They are not directly involved in
     hiding the scrollbar. */

  border: 1px dashed gray;
  padding: .5em;

  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.content {
  /* This is the magic bit for Firefox */
  scrollbar-width: none;
}

.content::-webkit-scrollbar {
  /* This is the magic bit for WebKit */
  display: none;
}

<div class='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis
egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue
tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus
vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend
mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus
facilisis a. Vivamus vulputate enim felis, a euismod diam elementum
non. Duis efficitur ac elit non placerat. Integer porta viverra nunc,
sed semper ipsum. Nam laoreet libero lacus.

Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum,
eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisque
nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed
tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium
volutpat. Duis elementum magna vel velit elementum, ut scelerisque
odio faucibus.
</div>

(이것은 실제로 가로 막대를 숨기므로 질문에 대한 정답은 아니지만 Google이 여기에서 나를 가리킬 때 찾고 있었기 때문에 어쨌든 게시 할 것이라고 생각했습니다.)

예, 일종의 ..

당신이 질문을 할 때, 할 수 없기 때문에, 모든 사람들이 "수 없음"말할 것이다 "브라우저의 스크롤바는 단순히 숨기거나 위장하기보다는, 어떤 방법으로 제거 할 수 있습니다" 제거 A의 모든 브라우저에서 스크롤바를 호환 및 상호 호환 가능한 방식으로 사용성에 대한 모든 주장이 있습니다.

그러나 웹 페이지 넘침을 허용하지 않으면 브라우저가 스크롤 막대를 생성하고 표시 할 필요가 없도록 할 수 있습니다.

이는 브라우저가 일반적으로하는 것과 동일한 동작을 사전에 대체하고 브라우저에게 감사하지만 친구에게 감사하지 말아야한다는 것을 의미합니다. 스크롤바를 제거하려고 시도하는 대신 (우리 모두가 불가능하다고 생각하는) 스크롤링을 피하고 (완벽히 실행 가능한) 요소를 스크롤하고 제어 할 수 있습니다.

오버플로가 숨겨진 div를 만듭니다. 사용자가 스크롤을 시도 할 때이를 감지하지만 overflow : hidden으로 스크롤하는 브라우저 기능을 비활성화했기 때문에 감지 할 수 없습니다. 대신 JavaScript를 사용하여 컨텐츠를 위로 이동하십시오. 브라우저 기본 스크롤링없이 iScroll 과 같은 플러그인을 사용하지 않고 자체 스크롤링을 생성합니다 .

---

철저하게하기 위해; 스크롤바를 조작하는 모든 벤더 고유의 방법 :

Internet Explorer 5.5 이상

* 이러한 속성은 CSS 사양에 포함되지 않았으며 승인되거나 공급 업체 접두사가 없었지만 Internet Explorer 및 Konqueror에서 작동합니다. 각 응용 프로그램의 사용자 스타일 시트에서 로컬로 설정할 수도 있습니다. Internet Explorer에서 Konqueror의 "Stylesheets"탭에있는 "Accessibility"탭에 있습니다.

body, html { /* These are defaults and can be replaced by hexadecimal color values */
    scrollbar-base-color: aqua;
    scrollbar-face-color: ThreeDFace;
    scrollbar-highlight-color: ThreeDHighlight;
    scrollbar-3dlight-color: ThreeDLightShadow;
    scrollbar-shadow-color: ThreeDDarkShadow;
    scrollbar-darkshadow-color: ThreeDDarkShadow;
    scrollbar-track-color: Scrollbar;
    scrollbar-arrow-color: ButtonText;
}

Internet Explorer 8부터 이러한 속성은 Microsoft가 접두사로 사용했지만 여전히 W3C에 의해 승인되지 않았습니다 .

-ms-scrollbar-base-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-3dlight-color
-ms-scrollbar-shadow-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-base-color
-ms-scrollbar-track-color

Internet Explorer에 대한 추가 정보

Internet Explorer scroll를 사용하면 스크롤 막대를 비활성화할지 여부를 설정합니다. 또한 스크롤 막대의 위치 값을 얻는 데 사용할 수 있습니다.

Microsoft Internet Explorer 6 이상에서 !DOCTYPE선언을 사용하여 표준 호환 모드를 지정하면이 속성이 HTML 요소에 적용됩니다. 표준 호환 모드가 지정되지 않은 경우, 인터넷 익스플로러의 이전 버전과 마찬가지로,이 속성은 적용 BODY요소, NOTHTML 요소입니다.

.NET으로 작업 할 때 System.Windows.Controls.PrimitivesPresentation 프레임 워크 의 ScrollBar 클래스 는 스크롤 막대를 렌더링하는 역할을합니다.

http://msdn.microsoft.com/en-us/library/ie/ms534393(v=vs.85).aspx

• MSDN. 기본 UI 속성
• W3C. 비표준 스크롤 막대 속성
• MSDN. .NET ScrollBar 클래스

WebKit

스크롤 막대 사용자 정의와 관련된 WebKit 확장은 다음과 같습니다.

::-webkit-scrollbar {}             /* 1 */
::-webkit-scrollbar-button {}      /* 2 */
::-webkit-scrollbar-track {}       /* 3 */
::-webkit-scrollbar-track-piece {} /* 4 */
::-webkit-scrollbar-thumb {}       /* 5 */
::-webkit-scrollbar-corner {}      /* 6 */
::-webkit-resizer {}               /* 7 */

이들은 각각 추가 의사 선택기와 결합 될 수 있습니다.

• :horizontal – 수평 유사 클래스는 수평 방향의 스크롤 막대 조각에 적용됩니다.
• :vertical – 세로 의사 클래스는 세로 방향의 스크롤 막대 조각에 적용됩니다.
• :decrement– 감소 의사 클래스는 버튼 및 트랙 피스에 적용됩니다. 버튼 또는 트랙 조각이 사용될 때보기 위치를 감소 시킬지 여부를 나타냅니다 (예 : 수직 스크롤 막대에서 위로, 수평 스크롤 막대에서 왼쪽으로).
• :increment– 의사 클래스 증가는 버튼과 트랙 조각에 적용됩니다. 버튼 또는 트랙 조각이 사용될 때보기의 위치를 ​​증가 시킬지 여부를 나타냅니다 (예 : 세로 스크롤 막대에서 아래로, 가로 스크롤 막대에서 오른쪽으로).
• :start– 의사 클래스 시작은 버튼과 트랙 조각에 적용됩니다. 객체가 엄지 앞에 위치하는지 여부를 나타냅니다.
• :end– 최종 의사 클래스는 버튼 및 트랙 피스에 적용됩니다. 객체가 엄지 뒤에 배치되는지 여부를 나타냅니다.
• :double-button– 이중 버튼 의사 클래스는 버튼 및 트랙 피스에 적용됩니다. 버튼이 스크롤바의 같은 끝에있는 버튼 쌍의 일부인지 여부를 감지하는 데 사용됩니다. 트랙 피스의 경우 트랙 피스가 버튼 쌍에 인접하는지 여부를 나타냅니다.
• :single-button– 단일 버튼 유사 클래스는 버튼 및 트랙 피스에 적용됩니다. 버튼이 스크롤바 끝에 있는지 여부를 감지하는 데 사용됩니다. 트랙 피스의 경우 트랙 피스가 싱글 톤 버튼과 인접하는지 여부를 나타냅니다.
• :no-button – 트랙 조각에 적용되며 트랙 조각이 스크롤 막대의 가장자리로 이동하는지 여부를 나타냅니다. 즉, 트랙의 끝에는 단추가 없습니다.
• :corner-present – 모든 스크롤 막대 조각에 적용되며 스크롤 막대 모서리가 있는지 여부를 나타냅니다.
• :window-inactive– 모든 스크롤 막대 조각에 적용되며 스크롤 막대를 포함하는 창이 현재 활성화되어 있는지 여부를 나타냅니다. (최근 야간에이 의사 클래스는 이제 :: selection에도 적용됩니다. 모든 컨텐츠를 처리하고 새로운 표준 의사 클래스로 제안하도록이를 확장 할 계획입니다.)

이러한 조합의 예

::-webkit-scrollbar-track-piece:start { /* Select the top half (or left half) or scrollbar track individually */ }
::-webkit-scrollbar-thumb:window-inactive { /* Select the thumb when the browser window isn't in focus */ }
::-webkit-scrollbar-button:horizontal:decrement:hover { /* Select the down or left scroll button when it's being hovered by the mouse */ }

• 스타일링 스크롤바-Webkit.org

Chrome에 대한 추가 정보

addWindowScrollHandler public static HandlerRegistration addWindowScrollHandler (Window.ScrollHandler 핸들러)

  Window.ScrollEvent 핸들러를 추가합니다. 매개 변수 : handler-핸들러 반환 값 : 핸들러 등록을 반환합니다. [ source ] ( http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/Window.html# addWindowScrollHandler (com.google.gwt.user.client.Window.ScrollHandler) )

모질라

Mozilla에는 스크롤 막대 조작을위한 일부 확장이 있지만 모두 사용하지 않는 것이 좋습니다.

• -moz-scrollbars-none 대신에 overflow : hidden을 사용하는 것이 좋습니다.
• -moz-scrollbars-horizontal overflow-x와 유사
• -moz-scrollbars-vertical overflow-y와 유사

• -moz-hidden-unscrollable내부적으로 사용자 프로필 설정 내에서만 작동합니다. XML 루트 요소 스크롤을 비활성화하고 화살표 키와 마우스 휠을 사용하여 웹 페이지를 스크롤하지 않습니다.

• '오버플로'에 대한 Mozilla 개발자 문서

Mozilla에 대한 추가 정보

이것은 내가 아는 한 실제로 유용하지는 않지만 스크롤 막대가 Firefox에 표시되는지 여부를 제어하는 ​​속성이 ( reference link ) 임을 주목할 가치가 있습니다 .

• 속성 :        스크롤바
• 유형 :               nsIDOMBarProp
• 설명 :   스크롤 막대가 창에 표시되는지 여부를 제어하는 ​​객체입니다. 이 속성은 JavaScript에서 "대체 가능"합니다. 읽기 전용

패딩은 마술과 같습니다.

다른 답변에서 이미 언급했듯이 여기에 충분히 설명이있는 그림이 있습니다.

역사 수업

궁금해서 스크롤바의 기원에 대해 배우고 싶었고 이것이 내가 찾은 최고의 참고 자료입니다.

• 스크롤과 스크롤바에 관한 10 가지 발명
• https://tools.ietf.org/id/draft-hellstrom-textpreview-02.txt
• https://tools.ietf.org/id/draft-mrose-blocks-service-01.txt

여러 가지 잡다한

HTML5 사양 초안에서 seamless속성이 스크롤 막대가 iFrames에 나타나지 않도록하여 페이지의 주변 컨텐츠와 혼합 될 수 없도록 정의되었습니다 . 이 요소는 최신 개정판에는 나타나지 않습니다.

scrollbarBarProp 객체의 자식 window객체와 스크롤기구, 또는 일부 유사한 인터페이스의 개념을 포함하는 사용자 인터페이스 요소를 나타낸다. 스크롤 막대가 보이면 window.scrollbars.visible반환 true됩니다.

interface Window {
  // The current browsing context
  readonly attribute WindowProxy window;
  readonly attribute WindowProxy self;
           attribute DOMString name;
  [PutForwards=href] readonly attribute Location location;
  readonly attribute History history;
  readonly attribute UndoManager undoManager;
  Selection getSelection();
  [Replaceable] readonly attribute BarProp locationbar;
  [Replaceable] readonly attribute BarProp menubar;
  [Replaceable] readonly attribute BarProp personalbar;
  [Replaceable] readonly attribute BarProp scrollbars;
  [Replaceable] readonly attribute BarProp statusbar;
  [Replaceable] readonly attribute BarProp toolbar;
  void close();
  void focus();
  void blur();
  // Truncated

히스토리 API에는 페이지로드시 스크롤 위치를 유지하기 위해 페이지 탐색시 스크롤 복원 기능도 포함되어 있습니다.

window.history.scrollRestoration를 사용하여 스크롤 복원 상태를 확인하거나 상태를 변경할 수 있습니다 (추가 : ="auto"/"manual"자동이 기본값입니다. 수동으로 변경하면 사용자가 앱의 기록을 탐색 할 때 필요할 수있는 스크롤 변경 사항을 개발자가 소유 함을 의미 함) 필요한 경우 history.pushState ()로 히스토리 항목을 푸시 할 때 스크롤 위치를 추적 할 수 있습니다.

---

더 읽을 거리 :

• Wikipedia의 스크롤바
• 스크롤 바 (Windows)
• 스크롤 방법
• 스크롤 방법-Microsoft Dev Network
• Github에서의 iScroll (위의 첫 번째 섹션에서 참조)
• Jakob Nielsen의 사용성에 관한 기사

예

• 본문 스크롤이없는 독립 스크롤 패널 (CSS 만 사용)-Ben Frain (2014 년 10 월 21 일)

div오버플로가 숨겨져 있고 내부가로 div설정된 래퍼 로이 작업을 수행 할 수 있습니다 auto.

내부 div의 스크롤 막대 를 제거하려면 내부 div에 음수 여백을 적용 하여 외부의 스크롤 막대를 잡아 당겨 외부 의 뷰포트 에서 빼낼 수 있습니다 div. 그런 다음 내용을 그대로 유지하기 위해 내부 div에 동일한 패딩을 적용하십시오.

JSFiddle

HTML

<div class="hide-scroll">
    <div class="viewport">
        ...
    </div>
</div>

CSS

.hide-scroll {
    overflow: hidden;
}

.viewport {
    overflow: auto;

    /* Make sure the inner div is not larger than the container
     * so that we have room to scroll.
     */
    max-height: 100%;

    /* Pick an arbitrary margin/padding that should be bigger
     * than the max width of all the scroll bars across
     * the devices you are targeting.
     * padding = -margin
     */
    margin-right: -100px;
    padding-right: 100px;
}

이것은 간단한 CSS 속성으로 저에게 효과적입니다.

.container {
    -ms-overflow-style: none;  // Internet Explorer 10+
    scrollbar-width: none;  // Firefox
}
.container::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

이전 버전의 Firefox의 경우 다음을 사용하십시오. overflow: -moz-scrollbars-none;

이론적으로 모든 최신 브라우저를 다루는 내 솔루션은 다음과 같습니다.

html {
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

html::-webkit-scrollbar {
    width: 0px; /* For Chrome, Safari, and Opera */
}

html 스크롤 막대를 숨기려는 요소로 바꿀 수 있습니다.

_{참고 : 내가 게시 한 코드가 이미 포함되어 있는지 확인하기 위해 다른 19 개의 답변을 생략했으며 2019 년에 상황을 요약 한 답변이 하나도없는 것처럼 보입니다. 많은 세부 사항은 훌륭합니다. 이것이 다른 사람에 의해 말되었고 나는 그것을 놓쳤다면 사과드립니다.}

여전히 관심이 있으시면 해결 방법을 찾았습니다. 이번이 첫 주이지만 나를 위해 일했습니다 ...

<div class="contentScroller">
    <div class="content">
    </div>
</div>

.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}

모바일 장치의 스크롤 막대를 숨길 수있는 솔루션을 찾고 있다면 Peter의 대답을 따르십시오 !

여기의 jsfiddle 수평 스크롤을 숨기려면 아래의 솔루션을 사용합니다.

.scroll-wrapper{
    overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar { 
    display: none; 
}

Android 4.0.4 (기본 브라우저 및 Chrome의 아이스크림 크림 샌드위치)가 포함 된 Samsung 태블릿과 iOS 6 (iPad 및 Chrome)의 iPad에서 테스트되었습니다.

CSS overflow속성을 사용하십시오 .

.noscroll {
  width: 150px;
  height: 150px;
  overflow: auto; /* Or hidden, or visible */
}

다음은 몇 가지 예입니다.

• overflow-x, overflow-y 테스트
• CSS 오버플로 속성

다른 사람들이 이미 말했듯이 CSS를 사용하십시오 overflow.

그러나 사용자가 여전히 스크롤 막대를 보지 않고 해당 내용을 스크롤 할 수있게하려면 JavaScript를 사용해야합니다.

해결책은 여기 내 대답 : 마우스 / 키보드로 스크롤 할 수 있지만 스크롤 막대 숨기기

베드로의 답변 외에도

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

이것은 Internet Explorer 10에서도 동일하게 작동합니다.

 #element {
      -ms-overflow-style: none;
 }

스크롤바를 숨기는 브라우저 간 접근.

Edge, Chrome, Firefox 및 Safari에서 테스트되었습니다.

마우스 휠로 스크롤하면서 스크롤바를 숨길 수 있습니다!

코드 펜

/* Make parent invisible */
#parent {
    visibility: hidden;
    overflow: scroll;
}

/* Safari and Chrome specific style. Don't need to make parent invisible, because we can style WebKit scrollbars */
#parent:not(*:root) {
  visibility: visible;
}

/* Make Safari and Chrome scrollbar invisible */
#parent::-webkit-scrollbar {
  visibility: hidden;
}

/* Make the child visible */
#child {
    visibility: visible;
}

스크롤이 작동하려면 스크롤 막대를 숨기기 전에 스타일을 고려하십시오. 최신 버전의 OS X 및 모바일 OS에는 스크롤바가있어 마우스로 잡기에는 비현실적이지만 상당히 아름답고 중립적입니다.

John Kurlak의 기술인 스크롤바를 숨기려면 패드가없는 Firefox 사용자에게 바퀴가 달린 마우스가 없으면 스크롤을 할 수없는 경우를 제외하고는 잘 작동하지만 일반적으로 세로 스크롤 만 가능합니다 .

요한의 기술은 세 가지 요소를 사용합니다.

• 스크롤바를 가리는 외부 요소입니다.
• 스크롤바가있는 중간 요소.
• 그리고 중간 요소의 크기를 설정하고 스크롤 막대를 갖도록하는 내용 요소.

외부 및 내용 요소의 크기를 동일하게 설정하여 백분율을 사용하지 않아도되지만 올바른 조정으로 작동하지 않는 다른 것은 생각할 수 없습니다.

가장 큰 관심사는 모든 버전의 브라우저가 스크롤 막대를 설정하여 오버플로 된 컨텐츠를 볼 수 있도록하는 것입니다. 최신 브라우저에서는 테스트했지만 이전 브라우저에서는 테스트하지 않았습니다.

내 SASS를 용서하십시오 ; P

%size {
    // set width and height
}

.outer {
    // mask scrollbars of child
    overflow: hidden;
    // set mask size
    @extend %size;
    // has absolutely positioned child
    position: relative;
}

.middle {
    // always have scrollbars.
    // don't use auto, it leaves vertical scrollbar showing
    overflow: scroll;
    // without absolute, the vertical scrollbar shows
    position: absolute;
}
// prevent text selection from revealing scrollbar, which it only does on
// some webkit based browsers.
.middle::-webkit-scrollbar {
    display: none;
}

.content {
    // push scrollbars behind mask
    @extend %size;
}

테스팅

OS X은 10.6.8입니다. Windows는 Windows 7입니다.

• Firefox 32.0 스크롤바가 숨겨져 있습니다. 클릭하여 초점을 맞춘 후에도 화살표 키가 스크롤되지 않지만 트랙 패드에서 마우스 휠과 두 손가락이 작동합니다. OS X 및 Windows.
• Chrome 37.0 스크롤바가 숨겨져 있습니다. 클릭하여 초점을 맞춘 후 화살표 키가 작동합니다. 마우스 휠 및 트랙 패드 작동 OS X 및 Windows.
• Internet Explorer 11 스크롤 막대가 숨겨져 있습니다. 클릭하여 초점을 맞춘 후 화살표 키가 작동합니다. 마우스 휠이 작동합니다. Windows.
• Safari 5.1.10 스크롤바가 숨겨져 있습니다. 클릭하여 초점을 맞춘 후 화살표 키가 작동합니다. 마우스 휠 및 트랙 패드 작동 OS X.
• 안드로이드 4.4.4 및 4.1.2. 스크롤바가 숨겨져 있습니다. 터치 스크롤이 작동합니다. 4.4.4의 Chrome 37.0, Firefox 32.0 및 HTMLViewer에서 테스트했습니다. HTMLViewer에서 페이지는 마스크 된 콘텐츠의 크기이며 스크롤 할 수도 있습니다! 스크롤은 페이지 확대 / 축소와 호환됩니다.

방금이 질문을 읽는 다른 사람에게 그 설정 overflow: hidden(또는 오버플로 -y)을 지적한다고 생각 했습니다.body 요소의 이 스크롤 막대를 숨기지 않았다고이 .

나는 그 html요소 를 사용해야했다 .

auto hide , little version , scroll only-y 또는 only-x 와 같은 몇 가지 옵션으로 WebKit 버전을 작성했습니다 .

._scrollable{
    @size: 15px;
    @little_version_ratio: 2;
    @scrollbar-bg-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color-hover: rgba(0,0,0,0.3);
    @scrollbar-coner-color: rgba(0,0,0,0);

    overflow-y: scroll;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 100%;

    &::-webkit-scrollbar {
        background: none;
        width: @size;
        height: @size;
    }

    &::-webkit-scrollbar-track {
        background-color:@scrollbar-bg-color;
        border-radius: @size;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: @size;
        background-color:@scrollbar-handler-color;
        &:hover{
            background-color:@scrollbar-handler-color-hover;
        }
    }

    &::-webkit-scrollbar-corner {
      background-color: @scrollbar-coner-color;
    }

    &.little{
        &::-webkit-scrollbar {
            background: none;
            width: @size / @little_version_ratio;
            height: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-track {
            border-radius: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: @size / @little_version_ratio;
        }
    }

    &.autoHideScrollbar{
        overflow-x: hidden;
        overflow-y: hidden;
        &:hover{
            overflow-y: scroll;
            overflow-x: scroll;
            -webkit-overflow-scrolling: touch;
            &.only-y{
                overflow-y: scroll !important;
                overflow-x: hidden !important;
            }

            &.only-x{
                overflow-x: scroll !important;
                overflow-y: hidden !important;
            }
        }
    }

    &.only-y:not(.autoHideScrollbar){
        overflow-y: scroll !important;
        overflow-x: hidden !important;
    }

    &.only-x:not(.autoHideScrollbar){
        overflow-x: scroll !important;
        overflow-y: hidden !important;
    }
}

http://codepen.io/hicTech/pen/KmKrjb

스크롤 막대를 숨기려면이 CSS 코드를 고객 코드에 복사하십시오.

<style>

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

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

</style>

내 HTML은 다음과 같습니다

<div class="container">
  <div class="content">
  </div>
</div>

div스크롤 막대를 숨길 위치에 이것을 추가하십시오 .

.content {
  position: absolute;
  right: -100px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 75%; /* This can be any value of your choice */
}

그리고 이것을 컨테이너에 추가하십시오

.container {
  overflow-x: hidden;
  max-height: 100%;
  max-width: 100%;
}

세로 스크롤 막대를 비활성화하려면을 추가하십시오 overflow-y:hidden;.

그것에 대해 자세히 알아보십시오 : overflow .

overflow:hidden;jQuery를 사용하여 언제라도 내 대답이 스크롤됩니다 .

예를 들어, 마우스 휠로 가로로 스크롤하십시오.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
<script type="text/javascript">
    $(function() {

       $("YourSelector").mousewheel(function(event, delta) {

          this.scrollLeft -= (delta * 30);
          event.preventDefault();
       });
    });
</script>

overflowCSS 속성으로 조작 할 수 있다고 생각 하지만 브라우저 지원은 제한적입니다. 한 소식통은 인터넷 익스플로러 5 이상, 파이어 폭스 1.5 이상 및 사파리 3 이상이라고 말했는데 목적에 충분할 것입니다.

스크롤, 스크롤, 스크롤 은 좋은 토론입니다.

나는 모든 것을 시도했고 내 솔루션에 가장 효과가 있었던 것은 항상 세로 스크롤 막대를 표시 한 다음 음수 여백을 추가하여 숨기는 것입니다.

body {
  overflow-y: scroll;
  margin-right: -20px;
}