Défilement colonnes indépendantes

**piperang** · 01/12/2013, 07h21

Bonjour,
Je désirerais modifier mon site qui est en deux colonnes fixes qui défilent ensembles grâce à la molette de la souris pour le rendre semblable à celui de mediapart (http://www.mediapart.fr/) où les deux colonnes défilent verticalement ensemble lorsque la souris est sur celle de gauche et où seule la colonne de droite défile si la souris est positionnée sur elle.
Mon explication est peut être confuse il vaut mieux voir l'effet sur le site de Mediapart...
Javascript, CSS ??
Merci de vos réponses.

**NoSmoking** · 01/12/2013, 08h47

Bonjour,
sur la partie gauche tu laisses faire les choses naturellement, par contre sur la partie droite il te faut gérer l'événement onmousewhell et/ou DOMMouseScroll et scroller la DIV en fonction du résultat de la molette.

**piperang** · 01/12/2013, 16h56

Merci de votre réponse. C'est ce que j'avais tendance à faire naturellement. En tant que débutant

c'est du chinois

et peut être qu'un exemple ou un lien pouvant clarifier vos propos me seraient utiles

**NoSmoking** · 01/12/2013, 21h15

Après avoir regardé le lien il apparaît qu'il n'y a aucun javascript derrière tout cela simplement du CSS.

Le principe la DIV est dans un conteneur qui masque le contenu long.

La DIV contenue quant à elle est positionnée en absolue en prenant soin de masquer la barre de scroll, de la sorte l'utilisation de la molette est l'utilisation standard d'une DIV scrollable.

Ci dessous un petit exemple de la mise en application

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[CSS]Scroll DIV sans barre</title>
<style>
#cadre{
  position:relative;
  overflow:hidden;
  width:15em;
  height:20em;
  border:1px solid black;
}
#scroll{
  position:absolute;
  overflow-y:scroll;
  padding:0.5em;
  top:0;
  left:0;
  right:-1em;
  bottom:0;
}
</style>
</head>
<body>
<h1>Scroll DIV sans barre de défilement</h1>
<div id="cadre">
  <div id="scroll">
    <p>Coalito dignitates ordinarias coalito Rufinus annonae ad in est et praefectus Rufinus convectio enim tempestate.</p>
    <p>Filius quae clades lapide exilium ab quarto pater quae cruribus vicensimo acti Crateras ad filius per fortunas igitur cum Apollinares suam acti actitata constaret Apollinares locum clades quaedam cum Apollinares.</p>
    <p>Sibi quaesitoresque accusatores militum subditivos accitus quae subsidia imperiale tumor Vrsicinus Caesaris forensibus a subditivos abnuens certamina isdem litteris quorum cerneret agitabantur sibi militum accusatores consociatos sui exhalaret iunxerat iunxerat.</p>
    <p>Sibi honorem per superiore Syriarum velut cedentem Palaestina civitates Caesaream exstructas quasdam per et cultis exstructas ad nullam exstructas velut sed nitidis Ascalonem Palaestina exstructas exaedificavit Neapolim terris itidemque abundans.</p>
  </div>
</div>
</body>
</html>

tout est dans le CSS rien dans le javascript tu vas être heureux

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#cadre{
  position:relative;
  overflow:hidden;
  width:15em;
  height:20em;
  border:1px solid black;
}
#scroll{
  position:absolute;
  overflow-y:scroll;
  padding:0.5em;
  top:0;
  left:0;
  right:-1em;
  bottom:0;
}

**piperang** · 02/12/2013, 06h43

Merci beaucoup, je vais analyser tout ça !

**SpaceFrog** · 02/12/2013, 08h29

onmousewhell

onmousewheel

Défilement colonnes indépendantes

JavaScript

Discussions similaires

Partager

Partager