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

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