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

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

---

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

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

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

---

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

body {
   scrollbar-width: none
}

---

스크롤바를 숨길 수 있었지만이 솔루션으로 마우스 휠로 스크롤 할 수 있습니다.

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);
  });

---

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

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

---

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

::-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>

The scroll bar is hidden by the parent div.

This requires you to use overflow:hidden in the parent div.

---

This is what I needed to disable scrollbars while preserving scroll in Firefox, Chrome and Edge in :

          @-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 */
          }

---

For more recent version of Firefox the old solutions don't work anymore, but I did succesfully used in v66.0.3 the scrollbar-color property which you can set to transparent transparent and which will make the scrollbar in Firefox on the desktop at least invisible (still takes place in the viewport and on mobile doesn't work, but there the scrollbar is a fine line that is placed over the content on the right).

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

---

In some particular cases (the element is on the very right of the screen, or its parent overflow is hidden) this can be a solution:

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

---

Try using this:

overflow-y: -moz-hidden-unscrollable;

---

Add a css rule on body:

body{
  overflow: hidden;
}

ReferenceURL : https://stackoverflow.com/questions/20997183/how-to-hide-scrollbar-in-firefox