Firefox에서 스크롤바를 숨기는 방법?

방금 Google 크롬에서 스크롤바를 숨기는 방법을 찾았습니다. 다음 코드로 수행했습니다.

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

유일한 문제는 이것이 Firefox에서 작동하지 않는다는 것입니다. 여러 가지 방법을 시도했지만 여전히 작동하지 않습니다.

scrollbar-width규칙을 사용할 수 있습니다 . 당신은 할 수 scrollbar-width: none;Firefox에서 스크롤바를 숨기고 여전히 자유롭게 스크롤 할 수 있습니다.

body {
   scrollbar-width: none;
}

Chrome, Firefox 및 IE에서 스크롤 막대를 숨기려면 다음을 사용할 수 있습니다.

.hide-scrollbar
{
    overflow: auto;
    -ms-overflow-style: none; /* IE 11 */
    scrollbar-width: none; /* Firefox 64 */
}

스크롤바를 숨길 수 있었지만 여전히이 솔루션을 사용하여 마우스 휠로 스크롤 할 수 있습니다.

html {overflow: -moz-scrollbars-none;}

https://github.com/brandonaaron/jquery-mousewheel 플러그인을 다운로드 하고 다음 기능을 포함합니다.

jQuery('html,body').bind('mousewheel', function(event) {
    event.preventDefault();
    var scrollTop = this.scrollTop;
    this.scrollTop = (scrollTop + ((event.deltaY * event.deltaFactor) * -1));
    //console.log(event.deltaY, event.deltaFactor, event.originalEvent.deltaMode, event.originalEvent.wheelDelta);
  });

이것은 Firefox, Chrome 및 Edge에서 스크롤을 유지하면서 스크롤바를 비활성화하는 데 필요한 것입니다.

          @-moz-document url-prefix() { /* Disable scrollbar Firefox */
            html{
              scrollbar-width: none;
            }
          }
          body {
            margin: 0; /* remove default margin */
            scrollbar-width: none; /* Also needed to disable scrollbar Firefox */
            -ms-overflow-style: none;  /* Disable scrollbar IE 10+ */
            overflow-y: scroll;
          }
          body::-webkit-scrollbar {
            width: 0px;
            background: transparent; /* Disable scrollbar Chrome/Safari/Webkit */
          }

웹킷의 경우 다음을 사용하십시오.

::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}

Mozilla Firefox의 경우 다음 코드를 사용하십시오.

@-moz-document url-prefix() {
    html,body{overflow: hidden !important;}
}

스크롤이 작동하지 않으면

element {overflow-y: scroll;}

특정 요소에

이것은 일반적인 솔루션입니다.

<div class="outer">
 <div class="inner">
    Some content...
 </div>
</div>

<style>
 .outer {
 overflow: hidden;
}
 .inner {
 margin-right: -16px;
 overflow-y: scroll;
 overflow-x: hidden;
}
</style>

스크롤 막대는 상위 div에 의해 숨겨집니다.

이를 위해서는 상위 div에서 overflow : hidden을 사용해야합니다.

최신 버전의 Firefox의 경우 이전 솔루션이 더 이상 작동하지 않지만 v66.0.3에서 scrollbar-color설정 가능한 속성 transparent transparent과 데스크톱의 Firefox에서 스크롤 막대를 적어도 보이지 않게 만드는 속성을 성공적으로 사용 했습니다. 뷰포트와 모바일에서는 작동하지 않지만 스크롤바가 오른쪽에있는 콘텐츠 위에 놓인가는 선입니다.

overflow-y: auto; //or hidden if you don't want horizontal scrolling
overflow-y: auto;
scrollbar-color: transparent transparent;

나는 이것을 사용했고 그것은 효과가 있었다. https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width

html {
scrollbar-width: none;
}

참고 : 사용자 에이전트는 루트 요소에 설정된 모든 스크롤바 너비 값을 뷰포트에 적용해야합니다.

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

Firefox가 기능이있는 숨겨진 스크롤바에 대한 지원을 포기했기 때문에 Firefox에서는 작동하지 않습니다 ( overflow: -moz-scrollbars-none;이전 버전에서 사용할 수 있음 ).

만일 누군가가 파이어 폭스 (79.0)에서 스크롤바를 보이지 않게 만드는 해킹을 찾고 있다면.

다음은 Chrome, IE, Safari에서 성공적으로 작동하고 Firefox에서 스크롤바를 투명하게 만드는 솔루션입니다. 위의 어느 것도 스크롤바를 숨기는 데 firefox (79.0)에서 작동하지 않았습니다.

누구든지 색을 바꾸지 않고 할 수있는 방법을 찾으면 큰 도움이 될 것입니다. Pls는 아래에 설명합니다.

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

.scrollhost ::-moz-scrollbar {
  display: none;
 
}
 
.scrollhost {
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-color: transparent transparent; /*just hides the scrollbar for firefox */
}

이것을 사용해보십시오 :

overflow-y: -moz-hidden-unscrollable;

특정 경우 (요소가 화면 오른쪽에 있거나 상위 오버플로가 숨겨져 있음)가 해결책이 될 수 있습니다.

@-moz-document url-prefix() {
  .element {
    margin-right: -15px;
  }
}

나는 모든 것을 시도했고 내 솔루션에 가장 적합한 것은 항상 세로 스크롤 막대를 표시 한 다음 약간의 음수 여백을 추가하여 숨기는 것이 었습니다.

이것은 IE11, FF60.9 및 Chrome 80에서 작동했습니다.

body {
  -ms-overflow-style: none; /** IE11 */
  overflow-y: scroll;
  overflow-x: hidden;
  margin-right: -20px;
}

나는 그것을 사용 ReactJS 나를 위해 일하고있어 create-react-app내에서 이것을 넣어 App.css:

@-moz-document url-prefix() {
  html,
  body {
    scrollbar-width: none;
  }
}

또한 body요소에는overflow: auto