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

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

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

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

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

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

В Firefox он не работает.

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

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

источник

2013-10-25 Mei

Почему бы не использовать оба? –

Также, добро пожаловать в StackOverflow, и ваш английский в порядке :) –

@christian На самом деле, я использую оба в своем коде, но он работает только с Chrome, а не с firefox: ') – Mei

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

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

источник

2013-10-25 03:14:09

Я попробовал margin-right: -14px, но полоса прокрутки не изменила позицию (ничего не случилось с ней), хотя содержимое внутри меняет позицию справа (от margin-right -14) – Mei

, но ваш ответ очень полезен, большое вам спасибо: D – Mei

หมี เมืองทอง - убедитесь, что родительский элемент - 'overflow: hidden' –

Я был в состоянии скрыть полосу прокрутки, но по-прежнему иметь возможность прокрутки с помощью колесика мыши с этим решением:

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

источник

2014-09-18 05:10:34 CrazyScientist

Я предполагаю, что вы хотите для скрытия полосы прокрутки локально. Я имею в виду, что не на веб-сервере для мира, а на вашей локальной копии 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.

источник

2016-05-25 09:12:09

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

источник

2016-08-21 03:21:24

сравни: https://stackoverflow.com/a/41021131/4881677

Это, как я это делаю, только CSS и хорошо работает с фреймворками типа бутстрапе. Требуется только 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>

источник

2016-12-07 15:05:02 Jean

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

ответ

Смежные вопросы