HTML/CSS Comment obtenir 2 barres de défilement complètement indépendantes?

J'ai donc codé quelque chose comme ceci: http://jsfiddle.net/6ck393z8/ (Il est une version simplifiée d'une conception que je me prépare pour un site Web)HTML/CSS Comment obtenir 2 barres de défilement complètement indépendantes?

HTML:

<table class="questionsTable"> 
    <col width="100" /> 
    <tr> 
     <td class="questionsList" rowspan="1"> 
      <div id="scroll"> 
       <div id="thingy"></div> 
       <div id="thingy"></div> 
       <div id="thingy"></div> 
       <div id="thingy"></div> 
       <div id="thingy"></div> 
       <div id="thingy"></div> 
       <div id="thingy"></div> 
       <div id="thingy"></div> 
      </div> 
     </td> 
     <td height="auto"> 
      <div id="image"></div> 
     </td> 
    </tr> 
</table>

CSS:

#thingy { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    margin: 10px; 
} 

#image { 
    width: 100px; 
    height: 800px; 
    background-color: blue; 
} 

.questionsTable { 
    width: 100%; 
    height: 100%; 
} 

#scroll { 
    overflow-y: scroll; 
    overflow-x: hidden; 
    height: 100%; 
}

Le côté gauche est un menu avec différents boutons qui modifient le contenu sur la droite, mais voici le problème: Tous les boutons sur la gauche ne sont pas accessibles w quand l'image est grande, ce qui est le cas maintenant. Dans ces moments, j'ai besoin de faire défiler la barre de défilement vers le bas, sinon tous les éléments sur la gauche ne peuvent pas être atteints. Je voudrais évidemment que les deux zones soient indépendantes les unes des autres, vous ne faites que défiler sur la droite pour contrôler l'image, et vous ne faites que défiler à gauche pour contrôler le menu.

Comment est-ce que je pourrais faire cela?

Source

2014-08-28 Jan Nowak

Essayez le code suivant

<body> 
    <!-- Main container to hold all sections and each section will have their own scrollbars --> 
    <div> 
     <!-- Left section with same height --> 
     <div style="height:300px; overflow:auto;float:left; width:45%;"> 
      <div id="scroll"> 
       <div id="thingy"></div> 
       <div id="thingy"></div> 
       <div id="thingy"></div> 
       <div id="thingy"></div> 
       <div id="thingy"></div> 
       <div id="thingy"></div> 
       <div id="thingy"></div> 
       <div id="thingy"></div> 
      </div> 
     </div> 
     <!-- Right section with same height --> 
     <div style="height:300px; overflow:auto;float:right; width:45%"> 
      <div id="image"></div> 
     </div> 
    </div> 
</body>

Source

2014-08-28 11:58:14 Rajesh

On pourrait utiliser un certain raffinement, mais cela fonctionne, merci :) –

HTML/CSS Comment obtenir 2 barres de défilement complètement indépendantes?

Répondre

Questions connexes