J'ai un div
avec des styles d'éléments comme ceci:
<div style="overflow-y: auto; max-height: 300px;">< id="DivTableContainer" ></div>
Je dois autoriser le défilement le long de l'axe des y quand il devient supérieur à 300px, cela fonctionne bien. Mais j'ai besoin de définir "visiblity = false"
pour défiler la barre elle-même.
J'ai essayé d'utiliser ce style d'élément:
overflow-y: hidden;
Bien qu'il masque la barre de défilement, il interdit également le défilement. Existe-t-il un moyen d'obtenir un défilement sans que la barre de défilement soit visible?
C'est mieux, si vous utilisez deux contenants 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; }
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; }
JSFiddle Demo
Testé sur FF et Safari.
Je sais que c'est une vieille mais c'est un moyen rapide de cacher la barre de défilement avec un CSS pur.
Ajoutez simplement
::-webkit-scrollbar {display:none;}
Pour votre identifiant ou classe de la division, vous utilisez la barre de défilement avec.
Voici un lien utile Barre de défilement personnalisée dans Webkit