Discussion :

[lexgotham]

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 html :

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

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 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
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 :

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

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

[lexgotham]

Ceci fonctionne.

Code :

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

1
2
3
4
$(window).on('mousewheel',function(event) {
    var scroll = $('#frame').scrollTop();
    $('#frame').scrollTop(scroll - event.originalEvent.wheelDeltaY);
});

Merci.