Eléments défilants verticalement qui restent fixes Horizontalement

Question

J'ai lu quelques petites choses à ce sujet et j'ai une solution "réalisable", cependant, je me demande s'il y a une manière plus propre et moins nerveuse d'accomplir cela. J'ai une "table", vraiment plusieurs éléments ul qui fonctionnent comme une table. J'ai un en-tête ul qui reste fixé en haut sur le défilement vertical mais défile avec le corps pendant les défilements horizontaux. Ce que j'essaye d'accomplir est d'avoir une colonne de gauche «gelée» qui reste toujours fixée sur le côté gauche pour la fenêtre sur les rouleaux horizontaux mais défile verticalement avec sa rangée de contenu respective. Comme je l'ai dit plus haut, j'ai une version de travail utilisant javascript, mais sur les appareils tactiles, (surface pro, iPad mini), elle rend la "colonne gelée" nerveuse au lieu d'un joli mouvement fluide. Lorsque la barre de défilement horizontale est cliquée et déplacée, l'effet désiré est atteint mais je voudrais que ce soit le cas pour toutes les situations si possible.

Voici un jsfiddle avec un exemple de travail de base. Encore une fois fonctionne parfaitement sur la plupart des appareils tout simplement pas tactile de ce que je peux dire. Fonctionne bien sur ma surface pro lorsqu'il est connecté à un moniteur externe, mais lorsque vous utilisez juste la surface pro il est encore une fois nerveux.

Toutes pensées ou idées sont les bienvenues.

Answer 1

Vous pouvez toujours avoir deux listes, une de celles-ci serait fixe (disons absolument positionnée) à gauche et une autre est en fait un conteneur défilable avec marge, équal à la largeur du panneau gauche, occupant le reste de l'espace et à l'intérieur votre contenu déroulant sera mis de côté.

Check this fiddle.

.left { 
    position: absolute; width: 100px; 
} 

.right { /* scrollable */ 
    width: 300px; overflow: scroll; 
} 

(conteneurs est soumis à css optimiser, bien sûr, je viens d'essayer de montrer « générale » idée)

Hope it helps ...