web-dev-qa-db-fra.com

Autoriser le défilement mais masquer la barre de défilement

J'ai un div avec des styles d'élément comme celui-ci:

 <div style="overflow-y: auto; max-height: 300px;">< id="DivTableContainer" ></div>

Je dois autoriser le défilement le long de l'axe des y lorsqu'il dépasse 300 px, cela fonctionne bien. Mais je dois définir "visiblity = false" pour faire défiler la barre elle-même.

J'ai essayé d'utiliser ce style d'élément:

overflow-y: hidden;

La barre de défilement est masquée mais le défilement est également interdit. Existe-t-il un moyen de faire défiler l'écran sans que la barre de défilement ne soit visible?

javascripthtmlcss
34
Suganth G

Mieux vaut utiliser deux conteneurs div en HTML.

Comme indiqué ci-dessous:

HTML:

<div id="container1">
    <div id="container2">
        // Content here
    </div>
</div>

CSS:

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

 #container2{
    height: 100%;
    width: 100%;
    overflow: auto;
    padding-right: 20px;
}
30
Joe Mike

Je sais que ceci est un ancien, mais voici un moyen rapide de masquer la barre de défilement avec du CSS pur.

Ajoutez simplement

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

Vous utilisez la barre de défilement avec votre identifiant ou votre classe de la div.

Voici un lien utile barre de défilement personnalisée dans Webkit

12
lostInTheTetons

Essaye ça:

HTML: 

<div id="container">
    <div id="content">
        // Content here
    </div>
</div>

CSS: 

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

#content{
    width: 100%;
    height: 99%;
    overflow: auto;
    padding-right: 15px;
}

html, body{
    height: 99%;
    overflow:hidden;
}

Démo JSFiddle

Testé sur FF et Safari.

7
imbondbaby