jQuery : scroller une div quand on scrolle une fenêtre
Bonjour,
J'aimerais trouver une solution jQuery à mon problème.
J'ai une div centrée au milieu du body avec un html et un CSS assez particulier pour répondre à un besoin (seule la bordure inférieure de la div semble monter et descendre lors d'un scroll).
Cela fonctionne très bien quand je scroll à l souris dans la div mais j'aimerais que le défilement dans cette div se fasse également quand je scrolle à la souris en dehors de la div (n'importe où sur la page).
Voici mon
Code:
1
2
3
4
5
6
7
8
9
10
11
| <div id="dummy_top_frame"></div>
<div id="frame">
<div id="container">
contenu
</div>
</div> |
Voici mon
Code:
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
| html,
body,
#frame{
-ms-overflow-style: none;
scrollbar-width: none;
}
body::-webkit-scrollbar,
#frame::-webkit-scrollbar{
display: none;
width: 0;
height: 0;
}
body{
margin:0px;
padding:0px;
background:#333;
}
#dummy_top_frame{
position:absolute;
top:40px;
width:598px;
height:150px;
left:50%;
margin-left:-300px;
border:1px solid white;
border-bottom:none;
background:black;
}
#frame{
position:fixed;
top:41px;
width:600px;
left:50%;
margin-left:-300px;
height: calc( 100% - 41px);
overflow:scroll;
}
#container{
position:relative;
width:598px;
border:1px solid white;
border-top:none;
margin-bottom:140px;
background:black;
color:white;
} |
J'ai trouvé ceci comme solution éventuelle en cherchant sur le web mais ça ne marche pas:
Code:
1
2
3
| $(window).scroll(function(){
$('#container').scrollTop($(this).scrollTop());
}); |
En effet, l'idée tient la route mais comme la fenêtre ne déborde jamais, aucun scroll effectif de la souris n'y est détecté. Et donc le contenu de la div centrale reste statique.
Voici un exemple de ce que ça donne pour l'instant):
https://jsfiddle.net/7w8j1s6L/
PS: une solution avec CSS m'irait aussi mais vu le css existant, une solution javascript me parait plus simple à envisager.
Merci
