it-swarm-eu.dev

Scopri la barra di scorrimento, ma pur continuando uno scorrere

Voglio essere in grado di scorrere l'intera pagina, ma senza mostrare la barra di scorrimento.

In Google Chrome è:

::-webkit-scrollbar { 
    display: none; 
}

Ma Mozilla Firefox e Internet Explorer non sembrano funzionare così.

Ho anche provato questo in CSS:

overflow: hidden;

Ciò nasconde la barra di scorrimento, ma non riesco più a scorrere.

C'è un modo per rimuovere la barra di scorrimento pur continuando a scorrere l'intera pagina? Con solo CSS o HTML, per favore.

868
Oussama Dooby

Solo un test che funziona bene.

#parent{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

Working Fiddle

JavaScript:

Poiché la larghezza della barra di scorrimento è diversa nei vari browser, è meglio gestirla con JavaScript. Se fai Element.offsetWidth - Element.clientWidth, verrà visualizzata la larghezza esatta della barra di scorrimento.

JavaScript che funziona Fiddle

o

Utilizzando Position: absolute,

#parent{
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}

#child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
}

Working Fiddle

JavaScript che funziona Fiddle

Informazioni:

Sulla base di questa risposta, ho creato un plugin di scroll semplice . Spero che questo possa aiutare qualcuno.

654
Mr_Green

È facile con WebKit, con uno stile opzionale:

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}
284
Anirban Bhui

Questo funziona per me con semplici proprietà CSS:

.container {
    -ms-overflow-style: none;  // IE 10+
    scrollbar-width: none;  // Firefox
}
.container::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

AGGIORNATO: aggiunto la nuova proprietà scrollbar-width per Firefox.

Per le versioni precedenti di Firefox, utilizzare: overflow: -moz-scrollbars-none;

151
Hristo Eftimov

AGGIORNAMENTO: Firefox ora supporta le barre di scorrimento nascoste con CSS, quindi tutti i principali browser sono ora coperti (Chrome, Firefox, IE, Safari, ecc.).

Basta applicare il seguente CSS all'elemento da rimuovere per le barre di scorrimento:

.container {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}

Questa è la soluzione di cross browser meno hacky di cui sono attualmente a conoscenza. Guarda la demo.


RISPOSTA ORIGINALE:

Ecco un altro modo che non è stato ancora menzionato. È davvero semplice e coinvolge solo due div e CSS. Non è necessario alcun JavaScript o CSS proprietario e funziona su tutti i browser. Non richiede di impostare esplicitamente la larghezza del contenitore rendendolo così fluido.

Questo metodo utilizza un margine negativo per spostare la barra di scorrimento fuori dal genitore e quindi la stessa quantità di riempimento per Spingere il contenuto nella sua posizione originale. La tecnica funziona per lo scorrimento verticale, orizzontale e bidirezionale.

Demos:

Codice di esempio per la versione verticale:

HTML:

<div class="parent">
  <div class="child">
    Your content.
  </div>
</div>

CSS:

.parent{
  width: 400px;
  height: 200px;
  border: 1px solid #aaa;
  overflow: hidden;
}
.child{
  height: 100%;
  margin-right: -50px; /* maximum width of scrollbar */
  padding-right: 50px; /* maximum width of scrollbar */
  overflow-y: scroll;
}
124
Richrd

Uso:

<div style='overflow:hidden; width:500px;'>
   <div style='overflow:scroll; width:508px'>
      My scroll-able area
   </div>
</div>

Questo è un trucco per sovrapporre in qualche modo la barra di scorrimento con un div sovrapposto che non ha barre di scorrimento:

::-webkit-scrollbar {
    display: none;
}

Questo è solo per WebKit browser ... Oppure potresti usare il contenuto CSS specifico del browser (se ce ne sono in futuro). Ogni browser potrebbe avere una proprietà diversa e specifica per le rispettive barre.

Per Microsoft Edge utilizzare: -ms-overflow-style: -ms-autohiding-scrollbar; o -ms-overflow-style: none; come per MSDN .

Non esiste un equivalente per Firefox. Sebbene ci sia un plugin jQuery per raggiungere questo obiettivo, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

70
Arpit Singh

Questa risposta non include il codice, quindi ecco la soluzione da page :

Secondo la pagina questo approccio non ha bisogno di conoscere la larghezza della barra di scorrimento prima del tempo per funzionare e la soluzione funziona anche per tutti i browser, e può essere vista qui .

La cosa buona è che non sei obbligato a usare le differenze di riempimento o larghezza per nascondere la barra di scorrimento.

Questo è anche lo zoom sicuro. Le soluzioni di riempimento/larghezza mostrano la barra di scorrimento quando si riduce al minimo lo zoom.

Correzione di Firefox: http://jsbin.com/mugiqoveko/1/edit?output

.element,
.outer-container {
  width: 200px;
  height: 200px;
}
.outer-container {
  border: 5px solid purple;
  position: relative;
  overflow: hidden;
}
.inner-container {
  position: absolute;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding-right: 150px;
}
.inner-container::-webkit-scrollbar {
  display: none;
}
<div class="outer-container">
  <div class="inner-container">
    <div class="element">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut
      dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique
      aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie
      vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies.
    </div>
  </div>
</div>
33
Timo Kähkönen

Basta usare le seguenti tre righe e il problema verrà risolto:

#liaddshapes::-webkit-scrollbar {
    width: 0 !important;
}

Dove liaddshapes è il nome del div in cui lo scroll sta arrivando.

17
Innodel

HTML:

<div class="parent">
    <div class="child">
    </div>
</div>

CSS:

.parent{
    position: relative;
    width: 300px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden;
}

.child {
    height: 150px;   
    width: 318px;
    overflow-y: scroll;
}

Applicare CSS di conseguenza.

Controllalo qui (testato in Internet Explorer e Firefox).

9
Mischa

A partire dall'11 dicembre 2018 (Firefox 64 e successivi), la risposta a questa domanda è davvero molto semplice dato che Firefox 64+ implementa ora CSS Scrollbar Styling spec .

Basta usare il seguente CSS:

scrollbar-width: none;

Firefox 64 note di rilascio link here .

7
Chris

Uso:

#subparent{
    overflow: hidden;
    width: 500px;
    border: 1px rgba(0,0,0,1.00) solid;
}

#parent{
    width: 515px;
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 10%;
}

#child{
    width: 511px;
    background-color: rgba(123, 8, 10, 0.42);
}

<body>
    <div id="subparent">
        <div id="parent">
            <div id="child">
                <!- code here for scroll ->
            </div>
        </div>
     </div>
 </body>
7
Owais

Uso

function reloadScrollBars() {
    document.documentElement.style.overflow = 'auto';  // Firefox, Chrome
    document.body.scroll = "yes"; // Internet Explorer only
}

function unloadScrollBars() {
    document.documentElement.style.overflow = 'hidden';  // firefox, chrome
    document.body.scroll = "no"; // Internet Explorer only
}

Chiama queste funzioni per qualsiasi punto tu voglia caricare o scaricare o ricaricare le barre di scorrimento. È ancora scorrevole in Chrome poiché l'ho provato su Chrome, ma non sono sicuro degli altri browser.

6
user43353

Il mio problema: non voglio alcuno stile nel mio html, voglio direttamente il mio corpo scrollabile senza alcuna barra di scorrimento, e solo una scroll verticale, lavorando con css-grids per qualsiasi dimensione dello schermo.

Il box-dimensionamento valore impatto padding o soluzioni di margine, funzionano con box-dimensionamento: content-box .

Ho ancora bisogno della direttiva "-moz-scrollbar-none" e, come gdoron e Mr_Green, ho dovuto nascondere la barra di scorrimento. Ho provato -moz-transform e -moz-padding-start, per avere un impatto solo su firefox, ma c'erano degli effetti collaterali reattivi che avevano bisogno di molto lavoro.

Questa soluzione funziona per il contenuto del corpo html con lo stile "display: grid" ed è reattivo.

/* hide html and body scroll bar in css-grid context */
html,body{
  position: static; /* or relative or fixed ... */
  box-sizing: content-box; /* important for hidding scrollbar */
  display: grid; /* for css-grid */
  /* full screen */
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
}
html{
  -ms-overflow-style: none;  /* IE 10+ */
  overflow: -moz-scrollbars-none; /* should hide scroll bar */
}
/* no scroll bar for Safari and Chrome */
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  display: none; /*  might be enought */
  background: transparent;
  visibility: hidden;
  width: 0px;
}
/* Firefox only workaround */
@-moz-document url-prefix() {
  /* Make html with overflow hidden */
  html{
    overflow: hidden;
  }
  /* Make body max height auto */
  /* set right scroll bar out the screen  */
  body{
    /* enable scrolling content  */
    max-height: auto;
    /* 100vw +15px : trick to set the scroll bar out the screen */
    width: calc(100vw + 15px);
    min-width: calc(100vw + 15px);
    max-width: calc(100vw + 15px);
    /* set back the content inside the screen */
    padding-right: 15px;
  }
}
body{
  /* allow vertical scroll */
  overflow-y: scroll;
}
5
Lucile Fievet

Sui browser moderni puoi usare wheel eventhttps://developer.mozilla.org/en-US/docs/Web/Events/wheel

// content is the element you want to apply the wheel scroll effect
content.addEventListener('wheel', function(e) {
  const step = 100; // how many pixels to scroll
  if(e.deltaY > 0 ) // scroll down
     content.scrollTop += step;
  else //scroll up
     content.scrollTop -= step;
});
5
Doua Beri

Aggiungere padding a un div interno, come nella risposta attualmente accettata, non funzionerà se per qualche motivo si desidera utilizzare box-model: border-box.

Ciò che funziona in entrambi i casi sta aumentando la larghezza del div interno al 100% più la larghezza della barra di scorrimento (supponendo overflow: hidden sul div esterno).

Ad esempio, in CSS:

.container2 {
    width: calc(100% + 19px);
}

In Javascript, cross-browser:

var child = document.getElementById('container2');
var addWidth = child.offsetWidth - child.clientWidth + "px";
child.style.width = 'calc(100% + ' + addWidth + ')';
4
herman

Questo è il modo in cui lo faccio per lo scroll orizzontale, solo CSS e funziona bene con framework come bootstrap/col- *. Servono solo 2 div aggiuntivi e il genitore con un set di larghezza o larghezza massima:

È possibile selezionare il testo per farlo scorrere o scorrere con le dita se si dispone di un touchscreen.

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

Versione breve per persone pigre:

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

Questo funziona per me:

scroll-content {
    overflow-x: hidden;
    overflow-y: scroll;
}

scroll-content::-webkit-scrollbar{
    width: 0;
}
3
mangesh

Il plug-in perfect-scrollbar sembra essere la strada da percorrere, vedi: https://github.com/noraesae/perfect-scrollbar

E 'ben documentata e completa la soluzione basata su JS per il problema delle barre di scorrimento.

Pagina di dimostrazione: http://noraesae.github.io/perfect-scrollbar/

3
jmarceli

Questa è una soluzione divitis che tuttavia dovrebbe funzionare per tutti i browser ...

Il markup è il seguente, e deve essere all'interno di qualcosa con posizionamento relativo (e la sua larghezza dovrebbe essere impostata, ad esempio 400px):

<div class="hide-scrollbar">
    <div class="scrollbar">
        <div class="scrollbar-inner">

        </div>
    </div>
</div>

Il CSS:

.hide-scrollbar {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.scrollbar {
    overflow-y: scroll;
    position: absolute;
    top: 0;
    left: 0;
    right: -50px;
    bottom: 0;
}

.scrollbar-inner {
    width: 400px;
}
3
user3638471

Questo sarà al corpo:

<div id="maincontainer" >
<div id="child">this is the 1st step</div>
<div id="child">this is the 2nd step</div>
<div id="child">this is the 3rd step</div>

E questo è il CSS:

#maincontainer
{
    background: grey;
    width: 101%;
    height: 101%;
    overflow: auto;
    position: fixed;
}

#child
{
    background: white;
    height:500px;
}
3
Hilla

Mi è capitato di provare le soluzioni di cui sopra nel mio progetto e per qualche motivo non ero in grado di nascondere la barra di scorrimento a causa del posizionamento div. Quindi, ho deciso di nascondere la barra di scorrimento introducendo un div che lo copre in modo superficiale. L'esempio sotto è per una barra di scorrimento orizzontale:

<div id="container">
  <div id="content">
     My content that could overflow horizontally
  </div>
  <div id="scroll-cover">
     &nbsp; 
  </div>
</div>

Il CSS corrispondente è il seguente:

#container{
   width: 100%;
   height: 100%;
   overflow: hidden;
   position: relative;
}

#content{
  width: 100%;
  height: 100%;
  overflow-x: scroll;
}
#scroll-cover{
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: 0;
  background-color: #fff; /*change this to match color of page*/
}
3

Quanto segue funzionava per me su Microsoft, Chrome e Mozilla per un elemento div specifico:

div.rightsidebar {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar { 
    width: 0 !important;
}
2
Meloman

Un altro tipo di approccio hacky consiste nel fare overflow-y: hidden e quindi far scorrere manualmente l'elemento con qualcosa del genere:

function detectMouseWheelDirection( e ) {
  var delta = null, direction = false;
  if ( !e ) { // if the event is not provided, we get it from the window object
    e = window.event;
  }
  if ( e.wheelDelta ) { // will work in most cases
    delta = e.wheelDelta / 60;
  } else if ( e.detail ) { // fallback for Firefox
    delta = -e.detail / 2;
  }
  if ( delta !== null ) {
    direction = delta > 0 ? -200 : 200;
  }

  return direction;
}

if ( element.addEventListener ) {
 element.addEventListener( 'DOMMouseScroll', function( e ) {
   element.scrollBy({ 
     top: detectMouseWheelDirection( e ),
     left: 0, 
     behavior: 'smooth' 
  });
 });
}

C'è un ottimo articolo su come rilevare e gestire gli eventi onmousewheel in deepmikoto's blog. Questo potrebbe funzionare per te, ma non è sicuramente una soluzione elegante.

2
Gark Garcia

Volevo solo condividere uno snippet combinato per nascondere la barra di scorrimento che utilizzo durante lo sviluppo. È una raccolta di diversi frammenti trovati su Internet che funzionano per me:

    .container {
        overflow-x: scroll; /* for horiz. scroll, otherwise overflow-y: scroll; */

        -ms-overflow-style: none;
        overflow: -moz-scrollbars-none;
        scrollbar-width: none;
    }


    .container::-webkit-scrollbar {
        display: none;  /* Safari and Chrome */
    }

Spero che tu trovi questo utile: *

1
stamat

Un altro semplice strumento funzionante :

#maincontainer {
    background: orange;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

#childcontainer {
    background: yellow;
    position: relative;
    width: 200px;
    height: 200px;
    top: 20px;
    left: 20px;
    overflow: auto;
}

Overflow nascosto sul contenitore padre e overflow automatico sul contenitore figlio. Semplice.

1
geoyws

Basta impostare la larghezza della larghezza del bambino al 100%, il riempimento a 15px, l'overflow-x allo scroll e l'overflow: nascosto per il genitore e qualunque larghezza tu voglia, funziona perfettamente su tutti i principali browser tra cui IE Edge con un'eccezione di IE8 e inferiore.

2019: risposte sopra funziona.

non è necessario impostare lo sfondo più volte ma c'è un bug che a volte l'altezza della barra di scorrimento si comporta male. questo è possibile correggere come specificato di seguito

height:0px; /* fixes issue with extra space underneath scrollbar */
width: 0px;  

0
zinoadidi

Ho avuto questo problema ed è semplicissimo da risolvere.

Prendi due contenitori. L'interno sarà il tuo contenitore scorrevole e l'esterno ovviamente ospiterà l'interno:

#inner_container { width: 102%; overflow: auto; }
#outer_container { overflow: hidden }

È super semplice e dovrebbe funzionare con qualsiasi browser.