Làm cách nào để ẩn thanh cuộn trong Firefox?

Tôi vừa tìm ra cách ẩn thanh cuộn trong Google Chrome, tôi đã làm điều đó với mã này:

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

Vấn đề duy nhất là điều này không hoạt động trên Firefox. Đã thử nhiều cách nhưng vẫn không được.

Bạn có thể sử dụng scrollbar-widthquy tắc. Bạn có thể scrollbar-width: none;ẩn thanh cuộn trong Firefox mà vẫn có thể cuộn thoải mái.

body {
   scrollbar-width: none;
}

Để ẩn thanh cuộn trên Chrome, Firefox và IE, bạn có thể sử dụng cách này:

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

Tôi đã có thể ẩn thanh cuộn nhưng vẫn có thể cuộn bằng con lăn chuột với giải pháp này:

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

Tải xuống plugin https://github.com/brandonaaron/jquery-mousewheel và bao gồm chức năng này:

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

Đây là những gì tôi cần để tắt thanh cuộn trong khi vẫn giữ nguyên cuộn trong Firefox, Chrome và Edge trong:

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

Để sử dụng webkit sau:

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

Đối với Mozilla Firefox, hãy sử dụng mã sau:

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

và nếu cuộn không hoạt động thì hãy thêm

element {overflow-y: scroll;}

thành phần cụ thể

Đây là một cái gì đó của một giải pháp chung:

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

Thanh cuộn được ẩn bởi div cha.

Điều này yêu cầu bạn sử dụng tràn: ẩn trong div cha.

Đối với phiên bản Firefox mới hơn, các giải pháp cũ không hoạt động nữa, nhưng tôi đã sử dụng thành công trong v66.0.3 thuộc scrollbar-colortính mà bạn có thể đặt thành transparent transparentvà điều này sẽ làm cho thanh cuộn trong Firefox trên màn hình nền ít nhất là ẩn (vẫn diễn ra trong chế độ xem và trên thiết bị di động không hoạt động, nhưng ở đó thanh cuộn là một đường nhỏ được đặt trên nội dung ở bên phải).

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

Tôi đã sử dụng cái này và nó hoạt động. https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width

html {
scrollbar-width: none;
}

Lưu ý: Tác nhân người dùng phải áp dụng bất kỳ giá trị chiều rộng thanh cuộn nào được đặt trên phần tử gốc cho chế độ xem.

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

Nó sẽ không hoạt động trong Firefox, vì Firefox đã bỏ hỗ trợ các thanh cuộn ẩn có chức năng (bạn có thể sử dụng overflow: -moz-scrollbars-none;trong các phiên bản cũ).

Hãy thử sử dụng cái này:

overflow-y: -moz-hidden-unscrollable;

Trong một số trường hợp cụ thể (phần tử ở bên phải màn hình hoặc phần tử tràn gốc của nó bị ẩn), đây có thể là một giải pháp:

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

Tôi đã thử mọi thứ và điều hiệu quả nhất cho giải pháp của tôi là luôn hiển thị thanh cuộn dọc, sau đó thêm một số lề âm để ẩn nó.

Điều này hoạt động cho IE11, FF60.9 và Chrome 80

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

Đề phòng trường hợp ai đó đang tìm cách hack để bằng cách nào đó làm cho thanh cuộn vô hình trong firefox (79.0).

Đây là một giải pháp hoạt động thành công cho Chrome, IE, Safari và làm cho thanh cuộn trong suốt trên Firefox. Không có cách nào ở trên phù hợp với firefox (79.0) khi thực sự ẩn thanh cuộn.

Làm ơn nếu ai tìm được cách làm mà không bị đổi màu thì sẽ rất hữu ích. Xin vui lòng bình luận bên dưới.

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

Tôi đã làm cho nó hoạt động cho tôi trong ReactJS bằng cách sử dụng create-react-appcái này trong App.css:

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

Ngoài ra, bodyphần tử cóoverflow: auto