Как скрыть полосу прокрутки в Firefox?

Ответ 1

Вы можете использовать правило scrollbar-width. Вы можете scrollbar-width: none; скрыть полосу прокрутки в Firefox и по-прежнему иметь возможность свободно прокручивать.

body {
   scrollbar-width: none
}

Ответ 2

Мне удалось скрыть полосу прокрутки, но по-прежнему можно прокручивать колесиком мыши с помощью этого решения:

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

Ответ 3

Чтобы скрыть полосу прокрутки в Chrome, Firefox и IE, вы можете использовать это:

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

Ответ 4

Для 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;}

к конкретному элементу

Ответ 5

Это что-то общее:

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

Ответ 6

Это то, что мне нужно было отключить полосы прокрутки при сохранении прокрутки в 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 */
          }

Ответ 7

Для более поздней версии 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;

Ответ 8

В некоторых особых случаях (элемент находится в самом правом углу экрана или его родительское переполнение скрыто), это может быть решением:

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

Ответ 9

//Chrome, Safari, Opera
body ::-webkit-scrollbar { width: 0 !important }  

//Firefox
body { overflow: -moz-scrollbars-none; }

//Internet Explorer
body { -ms-overflow-style: none; }

Ответ 10

В статье на форуме поддержки Mozilla обсуждалось "Как скрыть или отключить вертикальные и горизонтальные полосы прокрутки?"

Убедитесь, что вы разместили файл userChrome.css в папке chrome в папке профиля Firefox.

Эта папка хром не существует по умолчанию и должна быть создана.

http://kb.mozillazine.org/Editing_configuration/Troubleshooting

@namespace url ( " http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" );/* требуется только один раз */

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

Вы можете проверить это по следующей ссылке

http://support.mozilla.org/en-US/questions/957337

Ответ 11

Попробуйте использовать это:

overflow-y: -moz-hidden-unscrollable;

Ответ 12

Добавьте правило CSS для тела:

body{
  overflow: hidden;
}