Ukryj pasek przewijania w przeglądarce Firefox

Chcę ukryć pasek przewijania na stronie, ale mogę przewijać, tak jak ma pasek przewijania. , więc nie mogę używać przepełnienia: ukrytego, ponieważ chcę, aby przewijać jak normalnie , ale nie widzę paska przewijania.Ukryj pasek przewijania w przeglądarce Firefox

więc używam tego kodu css (klasa nie-scroll-ciało jest klasą znacznika body)

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

To działa w Chrome, ale kiedy używam -moz- zamiast -webkit- jak ten

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

Nie działa w przeglądarce Firefox.

Co mogę zrobić, aby działało?

Dziękuję za każdą odpowiedź i przepraszam za mój biedny język angielski :)

Źródło

2013-10-25 Mei

Dlaczego po prostu nie korzystać z obu? –

Również witam w StackOverflow, a Twój angielski jest w porządku :) –

@ chrystian Właściwie używam obu w moim kodzie, ale działa tylko z Chrome, nie z firefoxem: ') – Mei

Według this answer i wszystko udało mi się znaleźć w internecie, nie ma Firefox odpowiednik selektora -webkit-scrollbar. Najwyraźniej istnieje used to be właściwość, -moz-scrollbars-none, której można użyć do tego, ale od tego czasu została usunięta i ludzie recommend przy użyciu overflow:hidden lub hackish margin-right: -14px rozwiązanie.

Przykro mi, ale nie mogę być bardziej pomocny - wygląda na to, że nie ma sposobu, aby zrobić to w sposób elegancki Firefox.

Źródło

2013-10-25 03:14:09

Próbowałem marginesu prawego: -14px, ale scrollbar nie zmienił pozycji (nic się z tym nie stało), chociaż zawartość wewnątrz zmienia pozycję w prawo (z marginesu -14) – Mei

, ale twoja odpowiedź jest bardzo pomocna, dziękuję bardzo: D – Mei

หมี เมืองทอง - bądź pewien, że elementem nadrzędnym jest 'przepełnienie: ukryte'' –

udało mi się ukryć pasek przewijania, ale nadal będą mogli przewijać za pomocą kółka myszy z tego rozwiązania:

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

Pobierz wtyczkę https://github.com/brandonaaron/jquery-mousewheel i zawierają tę funkcję:

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

Źródło

2014-09-18 05:10:34 CrazyScientist

I zakładając, że chcesz aby ukryć pasek przesuwania lokalnie. To znaczy, nie na serwerze WWW, który można zobaczyć na świecie, ale na lokalnej kopii firefox, tylko dla twojej "przyjemności oglądania".

to jest to, co znalazłem do pracy dla mnie na opensuse/kde: w userChrome.css;

użyj -14px, aby całkowicie ukryć pionowe przewijanie (więcej, jeśli kompozycja twojego systemu ma szersze ustawienie przewijania). Używam mniej (10 pikseli), aby zobaczyć tylko trochę, więc mogę kliknąć środkowym przyciskiem, aby przeskoczyć do miejsca na stronie.

rzeczą, którą zrobiłem, ale nie zawsze działa, dłużej: w userContent.css

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

-lub-

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

powyżej wykorzystywane do pracy, ale teraz ja Straciłem przewijanie kółka myszy. Teraz działają tylko klawisze strzałek klawiatury.

Mam nadzieję, że zrozumiałem, czego chcesz, a to pomaga. Landis.

Źródło

2016-05-25 09:12:09

Być może będziesz w stanie użyć overflow:-moz-hidden-unscrollable - to działało idealnie dla moich potrzeb po części dlatego, że już używałem dragscroll.js.

Źródło

2016-08-21 03:21:24

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

To jak to zrobić, tylko CSS i dobrze współpracuje z ram jak bootstrap. Potrzebny jest tylko 2 dodatkowe div:

Możesz wybrać tekst, aby go przewinąć lub przewinąć palcami, jeśli masz ekran dotykowy.

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

Krótka wersja dla leniwych:

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

Źródło

2016-12-07 15:05:02 Jean

Ukryj pasek przewijania w przeglądarce Firefox

Odpowiedz

Powiązane problemy