Скрыть полосу прокрутки в Firefox

Я хочу скрыть полосу прокрутки на странице, но я могу прокручивать, как будто она имеет полосу прокрутки. поэтому я не могу использовать переполнение: скрытый, потому что я хочу, чтобы я мог прокручивать как обычно, но не могу видеть полосу прокрутки.

поэтому я использую этот код CSS (класс not-scroll-body является классом тега body)

.not-scroll-body::-webkit-scrollbar {
    display: none; 
}

Работает в Chrome , но когда я использую-moz- вместо-webkit- нравится

.not-scroll-body::-moz-scrollbar {
    display: none; 
}

Это не работает в Firefox.

Что я могу сделать, чтобы заставить это работать?

Спасибо за каждый ответ и извините за мой плохой английский язык :)

 Christian Ternus25 окт. 2013 г., 05:05
Кроме того, добро пожаловать в StackOverflow, и ваш английский в порядке :)
 Christian Ternus25 окт. 2013 г., 05:05
Почему бы просто не использовать оба?
 Mei25 окт. 2013 г., 05:06
@christian На самом деле, я использую оба в своем коде, но он работает только с Chrome, а не с Firefox: ')
 Gark Garcia03 мая 2018 г., 01:06
Может быть, вы могли бы сделать что-то вродеэто...

Ответы на вопрос(6)

https://stackoverflow.com/a/41021131/4881677

Вот как я это делаю, только CSS и хорошо работает с такими фреймворками, как bootstrap. Требуется только 2 дополнительных div:

Вы можете выбрать текст для прокрутки или прокрутки пальцами, если у вас есть сенсорный экран.

.overflow-x-scroll-no-scrollbar {overflow:hidden;}
.overflow-x-scroll-no-scrollbar div {
  overflow-x:hidden;
  margin-bottom:-17px;
  overflow-y:hidden;
  width:100%;
}
.overflow-x-scroll-no-scrollbar div * {
  overflow-x:auto;
  width:100%;
  padding-bottom:17px;
  white-space: nowrap; 
  cursor:pointer
}

/* the following classes are only here to make the example looks nicer */
.row {width:100%}
.col-xs-4 {width:33%;float:left}
.col-xs-3 {width:25%;float:left}
.bg-gray{background-color:#DDDDDD}
.bg-orange{background-color:#FF9966}
.bg-blue{background-color:#6699FF}
.bg-orange-light{background-color:#FFAA88}
.bg-blue-light{background-color:#88AAFF}
<html><body>
  <div class="row">
    <div class="col-xs-4 bg-orange">Column 1</div>
    <div class="col-xs-3 bg-gray">Column 2</div>
    <div class="col-xs-4 bg-blue">Column 3</div>
  </div>
  <div class="row">
    <div class="col-xs-4 bg-orange-light">Content 1</div>
    <div class="col-xs-3 overflow-x-scroll-no-scrollbar">
      <div>
        <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
      </div>
    </div>
    <div class="col-xs-4 bg-blue-light">Content 3</div>
  </div>
</body></html>

Краткая версия для ленивых людей:

.overflow-x-scroll-no-scrollbar {overflow:hidden;}
.overflow-x-scroll-no-scrollbar div {
  overflow-x:hidden;
  margin-bottom:-17px;
  overflow-y:hidden;
  width:100%;
}
.overflow-x-scroll-no-scrollbar div * {
  overflow-x:auto;
  width:100%;
  padding-bottom:17px;
  white-space: nowrap; 
  cursor:pointer
}

/* the following classes are only here to make the example looks nicer */
.parent-style {width:100px;background-color:#FF9966}
<div class="parent-style overflow-x-scroll-no-scrollbar">
  <div>
    <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
  </div>
</div>

но я все еще смог прокрутить колесико мыши с помощью этого решения:

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 64, если вы хотите скрыть прокрутку, когда у вас естьoverflow:auto теперь вы можете сделатьscrollbar-width: none;! Woop Woop!от соответствующие документы (поддержка браузера показана внизу страницы).

Ниже простойРешение только для CSS это скроет вашу вертикальную и горизонтальную полосу прокрутки в Firefox (протестировано в v64 и Firefox Dev Edition v65.0b8).намек: попробуйте вертикальную и горизонтальную прокрутку на синем div.

.not-scroll-body {
  overflow: auto;
  height: 200px;
  width: 90%;
  background: linear-gradient(to bottom, cyan, blue);
  white-space: no-wrap;

  /* the line that rules them all */
  scrollbar-width: none;
  /* */
}

span {
  width: 200%;
  height: 400%;
  background: linear-gradient(to left, green, yellow);
  display: inline-block;
  margin: 5rem;
}
<div class="not-scroll-body"><span></span></div>

 Anthony13 мар. 2019 г., 20:57
не похоже на работу наbody элемент
 jwinn15 янв. 2019 г., 16:45
В заключение! Это сработало.

что вы хотите скрыть полосу прокрутки локально. Я имею в виду не на веб-сервере, чтобы увидеть мир, а на вашей локальной копии Firefox, только для вашего «удовольствия от просмотра».

это то, что я нашел для меня на opensuse / kde: в userChrome.css;

#content browser {
margin-right -12px !important;
overflow-x:hidden;
overflow-y:scroll;
}

используйте -14px, чтобы полностью скрыть вертикальную прокрутку (больше, если ваша системная тема имеет более широкие настройки прокрутки). Я использую меньше (10px), чтобы увидеть лишь небольшую его часть, поэтому я могу щелкнуть средней кнопкой мыши, чтобы перейти к месту на странице.

то, что я сделал, но больше не всегда работает: в userContent.css

#content browser {
overflow:-moz-scrollbars-none;
}

-или же-

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

Раньше работал, но теперь я потерял колесико мыши. Теперь работают только клавиши со стрелками на клавиатуре.

Надеюсь, я понял, что вы хотите, и это помогает. Landis.

этот ответ и все, что я смог найти в Интернете, нет аналога Firefox-webkit-scrollbar селектор. Видимо тамраньше был недвижимость,-moz-scrollbars-none, что вы могли бы использовать для этого, но он был удален и людирекомендую с помощьюoverflow:hidden или хакерскийmargin-right: -14px решение.

Извините, я не могу быть более полезным - похоже, у Firefox нет способа сделать это элегантно.

 Mei25 окт. 2013 г., 05:35
но ваш ответ очень полезен, спасибо большое: D
 will-ob17 апр. 2014 г., 13:41
Be เมืองทอง - убедитесь, что родительский элементoverflow:hidden
 jwinn15 янв. 2019 г., 16:48
Теперь это возможно в Firefox версии 64. Смотрите ответ protoEvangelion.
 Mei25 окт. 2013 г., 05:34
Я попробовал margin-right: -14px, но полоса прокрутки не изменила положение (с ним ничего не произошло), хотя содержимое внутри изменило положение вправо (от margin-right -14)
 dmo21 июл. 2015 г., 01:44
overflow: hidden; отлично работает на FF Mac, но вам все еще нужно использоватьoverflow: -moz-scrollbars-none; на винде (даже на 39.0). Однако MDN утверждает, что это уже устарело, поэтому используйте его с осторожностью.

Переполнение: -moz-скрытых unscrollable - это отлично сработало для моих нужд отчасти потому, что я уже использовалdragscroll.js.

Ваш ответ на вопрос