[JQUERY] 어떻게 브라우저 또는 요소 스크롤을 사용하지 않도록 설정할 수 있습니다,하지만 여전히 휠 스크롤을 허용하거나 화살표 키를?

어떻게 브라우저 또는 요소 스크롤을 사용하지 않도록 설정할 수 있습니다,하지만 여전히 휠 스크롤을 허용하거나 화살표 키를?

해결법

1. ---

   1.이전의 답변과 마찬가지로, 당신은 오버 플로우 사용합니다 : 숨겨진 신체 / DIV에 스크롤을 해제 할 수 있습니다.

   이전의 답변과 마찬가지로, 당신은 오버 플로우 사용합니다 : 숨겨진 신체 / DIV에 스크롤을 해제 할 수 있습니다.

   그런 다음 에뮬레이션 스크롤로 사업부의 scrollTop을 바꿀 것 기능에 마우스 휠 이벤트를 결합하는 것입니다.

   화살표 키를 들어, 에뮬레이션 스크롤에 맞게 사업부의 scrollTop과 scrollLeft에 변경 한 다음 화살표 키를 인식하기를 keyDown 이벤트를 결합하고있다. (참고 : IE는 화살표 키에 대한 키를 누를 인식하지 않기 때문에 당신의 키를 대신를 keyDown 사용합니다.) 편집 : 나는 사업부에를 keyDown 인식 FF / 크롬을 얻을 수 있지만, 그것은 IE8에서 작동합니다. 당신이이 무슨 필요에 따라 사업부를 스크롤 문서에를 keyDown 리스너를 설정할 수 있습니다. (예로서, 키 코드를 참조하여 체크 아웃).

   예를 들어, 마우스 휠 스크롤 (jQuery를하고 마우스 휠 플러그인을 사용하여) :

   <div id="example" style="width:300px;height:200px;overflow:hidden">
   insert enough text to overflow div here
   </div>
   
   <script>
   $("#example").bind("mousewheel",function(ev, delta) {
       var scrollTop = $(this).scrollTop();
       $(this).scrollTop(scrollTop-Math.round(delta));
   });
   </script>
   

   (이 빠른 모형, 당신이 천천히 조금 스크롤 나를 위해 이후의 숫자를 조정해야 할 것입니다.)

   키 코드 참조 마우스 휠 플러그인 를 keyDown, 키를 누를 때 @ 쿼크 모드

   업데이트 2012년 12월 19일 :

   https://github.com/brandonaaron/jquery-mousewheel : 마우스 휠 플러그인의 업데이트 된 위치에있다

2. ---

   2.어떤 순수 CSS의 솔루션에 대해? 나는이 테스트를했는데 그것을 잘 작동합니다. 그것은 JS 모든 브라우저에서 지원 것 해키하지 않고 매우 간단하지만, 나는 해결 방법 3을 추천 할 것입니다.

   어떤 순수 CSS의 솔루션에 대해? 나는이 테스트를했는데 그것을 잘 작동합니다. 그것은 JS 모든 브라우저에서 지원 것 해키하지 않고 매우 간단하지만, 나는 해결 방법 3을 추천 할 것입니다.

   해결 방법 1 (크로스 브라우저하지만 더 해키)

   #div { 위치 : 고정; 오른쪽 : -20px; 왼쪽 : 20 픽셀; 배경 색상 : 검정; 색상 : 흰색; 높이 : 5em; 오버플 Y : 스크롤; 오버 플로우 엑스 : 숨겨진; } 숨겨진 스크롤바와 DIV 스크롤!
   오버 플로우,이 사업부는 마우스 휠로 스크롤하지만 스크롤바가 표시되지 않습니다.
   스크롤로
   스크롤로
   스크롤로
   스크롤로
   스크롤로
   스크롤로
   스크롤로
   스크롤로
   스크롤로
   스크롤로
   스크롤로
   스크롤로
   스크롤 < BR> 스크롤로
   스크롤로
   스크롤로
   스크롤로
   스크롤로
   스크롤로
   스크롤로
   스크롤로
   스크롤로
   스크롤로
   스크롤로
   스크롤로
   스크롤로
   스크롤로
   스크롤로
   스크롤로
   스크롤로
   스크롤로
   스크롤로
   스크롤로
   스크롤로
   스크롤로
   스크롤로
   스크롤로
   스크롤 < BR> 스크롤로
   스크롤로
   스크롤로
   스크롤로
   

   해결 방법 2 (IE와 크롬 만 해당)

   그냥 당신이 스크롤바를 숨기려 요소에 nobars 클래스를 추가 할 수 있습니다.

   파이어 폭스 오버 플로우 : -moz-스크롤-것도, MDN에 따라, 사용되지 않습니다. 이 작업에 사용하지만 지금은 오버 플로우 및 사용 된 경우 스크롤 비활성화를 숨 깁니다.

   .nobars {
       /* Firefox: https://developer.mozilla.org/en/docs/Web/CSS/overflow */
       /* overflow: -moz-scrollbars-none; (no longer works) */
       /* IE: https://msdn.microsoft.com/en-us/library/hh771902(v=vs.85).aspx */
       -ms-overflow-style: none;
   }
   .nobars::-webkit-scrollbar {
       /* Chrome: https://css-tricks.com/custom-scrollbars-in-webkit/ */
       display: none;
   }
   

   해결 방법 3 (크로스 브라우저 자바 스크립트)

   완벽한 스크롤바는 (설치된 경우는 jQuery를 활용할 수 있지만) jQuery를 필요로하고, 여기에 사용 가능한 데모가되지 않습니다. 구성 요소는 다음 예와 같이 CSS로 스타일을 지정할 수 있습니다 :

   .ps-scrollbar-y-rail {
     display: none !important;
   }
   

   여기에 완벽한 스크롤 막대의 구현을 포함하여 완벽한 예입니다 :

   <link rel="stylesheet" href="css/perfect-scrollbar.min.css">
   <style>
     #container {
       position: relative; /* can be absolute or fixed if required */
       height: 200px; /* any value will do */
       overflow: scroll;
     }
     .ps-scrollbar-y-rail {
       display: none !important;
     }
   </style>
   <script src='js/perfect-scrollbar.min.js'></script>
   
   <div id="container">
     Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>
   </div>
   
   <script>
     // on dom ready...
     var container = document.getElementById("container");
     Ps.initialize(container);
     //Ps.update(container);
     //Ps.destroy(container);
   </script>
   

3. ---

   3.이 작업을하기 위해 JQuery와 또는 JS를 사용할 필요 없다. 간단한 웹킷과의 더 확대됨.

   이 작업을하기 위해 JQuery와 또는 JS를 사용할 필요 없다. 간단한 웹킷과의 더 확대됨.

   그냥 CSS 파일에 아래의 코드를 추가합니다.

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

   주의! 이 모든 스크롤 그래서 당신은 단지 하나를 숨겨하려면 특정 클래스 또는 ID에 넣어해야 사용할 수 없게됩니다.

4. ---

   4.나는 많은이 질문의 중복 제공 SamGoody의 답변을 좋아한다. 대신 수동으로 몇 가지 특정 입력 장치를 다시 구현하기 위해 노력하는 그대로 기본 스크롤 효과를 잎 :

   나는 많은이 질문의 중복 제공 SamGoody의 답변을 좋아한다. 대신 수동으로 몇 가지 특정 입력 장치를 다시 구현하기 위해 노력하는 그대로 기본 스크롤 효과를 잎 :

   구체화 아웃 예를 들어 원래의 설명을 참조하십시오. 당신은 그들이 8px 넓은 자신의 예처럼 항상 가정보다는 스크롤바의 실제 크기를 결정하기 위해 자바 스크립트를 사용할 수 있습니다.

5. ---

   5.나를 위해이 작업을 얻으려면,이 CSS를 사용 :

   나를 위해이 작업을 얻으려면,이 CSS를 사용 :

   html { overflow-y: hidden; }
   

   하지만 난 내 #ID에 바인딩, 그래서 $ (이)를 사용하여 문제 .scrollTop ()을했지만, 윈도우의 scrollTop을 수정합니다. 나는 20 그것을 곱 있도록 또한, 내 부드러운 스크롤 마우스, 1 또는 -1 델타 많이 발생한다.

   $("#example").bind("mousewheel", function (ev, delta) {
       var scrollTop = $(window).scrollTop();
       $(window).scrollTop(scrollTop - Math.round(delta * 20));
   });
   

6. ---

   6.Baldráni 위에서 말했듯

   Baldráni 위에서 말했듯

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

   또는 당신은 할 수있다

   ::-webkit-scrollbar{ width: 0px; }
   

   (구글 검색에서 이에 대한 그 비틀 거림 다른 사람들을 위해 게시!)

7. ---

   7.음, 아마도 가장 내 의견으로는 직관적 인,하지만 난 당신이 그것을 괜찮은 경험을 할 수있는 상상할 수있는,이 시도주지.

   음, 아마도 가장 내 의견으로는 직관적 인,하지만 난 당신이 그것을 괜찮은 경험을 할 수있는 상상할 수있는,이 시도주지.

   overflow:hidden; 
   

   있는지 확인 부모 개체가 블록으로 높이와 폭, 및 디스플레이가 있습니다

from https://stackoverflow.com/questions/1326570/how-can-i-disable-a-browser-or-element-scrollbar-but-still-allow-scrolling-with by cc-by-sa and MIT license