HTML & JavaScript – Passage de l’action de défilement d’un élément à un autre

Supposons que j’ai deux divs:


 (A scrollable list)

Et j’aimerais faire en sorte que, lorsque le curseur est garé dans #control et que la #control la souris est #view , #view défile à la place. Quoi qu’il en soit pour y parvenir?

Ok, solution rapide qui a fonctionné pour moi. Même si la div fixe ne peut pas faire défiler la liste, car elle n’a aucun contenu qui dépasse ses limites, vous pouvez toujours détecter les événements de la mousewheel . mousewheel événements mousewheel contiennent des deltas pour les dimensions x / y défilées.

Remarque: Ceci fonctionne pour les souris ou les pavés de piste et vous donnera la bonne direction (- / +), quels que soient les parameters inversés de l’axe des Y (lire: le défilement naturel d’Apple).

Par conséquent, vous pouvez faire quelque chose comme ceci:

 var fixedDiv = document.querySelector ('. my-fixed-div');
 var scrollableDiv = document.querySelector ('. my-scrollable-list');

 fixedDiv.addEventListener ('molette de souris', fonction (e) {
   scrollableDiv.scrollTop + = e.deltaY;
 });

je ne sais pas à quoi ressemble la mise en page

mais si elles sont juste à côté de l’autre, vous pouvez utiliser

 #control{pointer-events : none}

et changer quelques petites choses.

Voici un violon: http://jsfiddle.net/filever10/QVRNd/

Si les éléments ne peuvent pas être aussi proches, cela ne sera pas d’une grande aide.

Cela fonctionne en plaçant le contrôle sur la liste et en désactivant les événements de pointeur sur le contrôle.

J’ai testé cela et la seule façon de réaliser un événement onscroll sur un élément est d’ onscroll une barre de défilement active, qui “flotte”. Expliquer les flottants: sa position est à 100px du haut, quand on fait défiler on vérifie si elle monte ou descend, puis on la ramène à sa position initiale. Donc, rappelez-vous, vous avez besoin d’une barre de défilement active (le contenu interne de l’élément doit être supérieur à lui-même: vous pouvez utiliser plusieurs méthodes etc …);

Code Javascript:

Le CSS:

Ainsi, lorsque vous faites défiler l’intérieur de div1 , il vérifie s’il a été fait défiler vers le haut, vers le bas, div2 vers le haut / bas et définit div1 sur sa valeur de défilement par défaut. J’espère que cette astuce aide.

PS: Vous pouvez rendre les barres de défilement invisibles si vous effectuez des recherches ( overflow:hidden ne fonctionne pas car il n’y aura pas de barres de défilement actives)

Cela pourrait vous aider:

Le document a sa fonction onscroll.

 document.onscroll=moveSetting;

Disons que div1 doit faire défiler et le pointeur de la souris doit être à div2 .
Nous devons donc exécuter scFunc() uniquement si la souris est à div2. Nous pouvons y arriver en

 function moveSetting(evt) { var div2Obj=document.getElementById('div2'); var width=div2Obj.style.width; var border=div2Obj.style.border; var x=evt.pageX,y=evt.pageY, var leftChk=div2Obj.offsetLeft; var topChk=div2Obj.offsetTop; if(x>=leftChk && x<=(leftChk+width+border*2) && y>=topChk && y<=(topChk+width+border*2)) { scrollFunc(); } } var i,j; function scrollFunc() { var i=document.getElementById('div1').scrollTop; i++; i=j-1; document.getElementById('div1').scrollTop=i; /* manage your code yourself to scroll div1 from here */ }

Essayez la solution suivante. Vous pouvez écouter la molette de l’événement sur votre control et faire défiler la view l’autre div en fonction de la quantité de défilement effectuée (la valeur est extraite à l’aide de WheelEvent.deltaY );

Plus d’informations peuvent être trouvées ici: https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaY

 var fixedDiv = document.getElementById('control'), scrollableDiv = document.getElementById('view'); fixedDiv.addEventListener('mousewheel', function (e) { scrollableDiv.scrollTop += e.deltaY; console.log(scrollableDiv.scrollTop); });

 #control, #view { width: 500px } #view { height: 500px; overflow: auto; padding-top: 30px } #control { position:fixed; height: 50px; background-color: red }

 Keep your mouse here and scroll
  item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item
 item

Jetez un coup d’œil au dernier exemple ->

http://api.jquery.com/scroll/