Rendre les barres de défilement visibles uniquement lorsqu'un Div est survolé ?

Question

J'essaie de comprendre comment avoir un div déroulant qui n'affiche que ses barres de défilement lorsqu'il est survolé.

L'exemple est la recherche d'images Google, dans l'image ci-dessous, vous pouvez voir comment la barre latérale gauche ne semble pas pouvoir défiler jusqu'à ce que vous passiez la souris dessus.

Est-ce possible avec CSS ou Javascript est-il obligatoire ? Si possible peut-être un exemple rapide comment faire une telle tâche ?

Answer 1

 div {
  height: 100px;
  width: 50%;
  margin: 0 auto;
  overflow: hidden;
}

div:hover {
  overflow-y: scroll;
}

 <div>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</div>

Est-ce que quelque chose comme ça fonctionnerait ?

Answer 2

Donnez au div une hauteur fixe et srcoll:hidden; et en survol, changez le défilement en auto ;

 #test_scroll{ height:300px; overflow:hidden;}
#test_scroll:hover{overflow-y:auto;}

Voici un exemple. http://jsfiddle.net/Lywpk/

Answer 3

je pense à quelque chose comme

 $("#leftDiv").mouseover(function(){$(this).css("overflow","scroll");});
$("#leftDiv").mouseout(function(){$(this).css("overflow","hidden");});