어떻게 스크롤바를 감추고 스크롤을 허용합니까?

Question

내 자신의 스크롤바를 만들고 싶지만 그 일을 끝내려면 먼저 기본 스크롤바를 숨기고 스크롤을 허용해야합니다.

overflow-y:hidden; 

을하지만 스크롤 및 해제 스크롤을 숨기기보다는 :

나는 이미 시도했다.

나는이 질문을 여기에서 한 다른 사람들이있다는 것을 나는 안다. 그러나 나는 그것을 숨기려는 패딩에 단지 싶지 않다. 나는 그것을 완전히 숨기는 방법을 원한다.

Answer 1

가장 좋은 방법은 jQuery 플러그인을 사용하는 것입니다.

사용자 정의가 가능하고 유연한 것은 jScrollPane입니다.이 도구는 가로 스크롤과 세로 스크롤에 모두 사용되며 핸들, 레일, 래퍼 등과 같은 요소에 스타일을 적용하여 쉽게 스타일을 지정할 수 있습니다. 스크롤바에는 스타일이 필요합니다. 상자에서 꽤 못생긴다.

좀 더 예쁘게하려면 perfect-scrollbar을 시도해보십시오. Mac OS X에서 스크롤 막대의 동작을 멋지게 모방합니다 (좋은 경우, 필요한 경우에만 표시됨).

나는 또한 jQuery-slimScroll을 사용했으며 매우 잘 수행했습니다. 가볍고 사용하기 쉬우 며 스타일이 좋고보기 좋지만 첫 번째만큼 사용자 정의 할 수는 없습니다.

이론적으로 CSS 만 사용하여 스크롤바를 숨길 수도 있습니다.하지만 이는 사용자 경험에 해로운 영향을줍니다. 나는 그들 스스로 모든 기본 스크롤 바를 처리 할 것이므로 definetly jQuery 플러그인 솔루션과 함께 갈 것이다.

::-webkit-scrollbar { 
    height: 0px !important; 
    width: 0px !important; 
    display: none !important; 
} 

는 또한 webkit.org에 Developer Documentation를 참조하십시오

Answer 2

다음은 CSS입니다.

Answer 3

수동 스크롤을 허용 할 필요가 없으므로 프로그래밍 방식으로 스크롤 할 수 있습니다.

document.getElementById("right").addEventListener("mousemove",function(){ 
 
    document.getElementById("outer").scrollLeft+=10; 
 
}); 
 
document.getElementById("left").addEventListener("mousemove",function(){ 
 
    document.getElementById("outer").scrollLeft-=10; 
 
});

#outer { 
 
    float:left; 
 
    border:2px solid red; 
 
    height:100px; 
 
    width:200px; 
 
    display:inline-block; 
 
    overflow-x:hidden; 
 
} 
 
#inner { 
 
    display:block; 
 
    height:100%; 
 
    white-space:nowrap; 
 
} 
 
#left { 
 
    float:left; 
 
    border:2px solid red; 
 
    height:100px; 
 
    width:50px; 
 
    display:inline-block; 
 
    background:lime; 
 
    line-height:100px; 
 
} 
 
#right { 
 
    float:left; 
 
    border:2px solid red; 
 
    height:100px; 
 
    width:50px; 
 
    display:inline-block; 
 
    background:lime; 
 
    line-height:100px; 
 
}

<div id="left">&lt--</div> 
 
<div id="outer"> 
 
    <div id="inner">sdk hfkhsdbf khsdbf kbsdf kbsdkjf sdkjbg lsdkbg;kSBGKdbs gksbd gksdb g</div> 
 
</div> 
 
<div id="right">--&gt</div>