Як приховати смугу прокрутки у Firefox?

Я щойно дізнався, як приховати смугу прокрутки в Google Chrome, я зробив це за допомогою цього коду:

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

Для цього потрібно використовувати overflow: hidden у батьківському div.

Для останньої версії 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;у старих версіях).

Про всяк випадок, якщо хтось шукає хакер, щоб хоч якось зробити смугу прокрутки невидимою у firefox (79.0).

Ось рішення, яке успішно працює для Chrome, IE, Safari та робить смугу прокрутки прозорою у Firefox. Жодне з наведеного не працювало для firefox (79.0), справді приховуючи смугу прокрутки.

Будь ласка, якщо хтось знайде спосіб зробити це без зміни кольору, це буде дуже корисно. Прохання зауважити нижче.

.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