web-dev-qa-db-fra.com

Onscroll pour div

Un élément div ne dispose-t-il pas de onscroll gestionnaire d'événements? Le comportement sur ma page ne semble pas indiquer le gestionnaire d'événements Div onscroll est reconnu.

<div id='bd' onscroll='alert("Scroll Called");'></div>

Aussi,
[.____] Les événements de défilement DOI DOV Roulez-vous aux événements de défilement de la fenêtre, conformément à la bulle de Dom?

htmljavascript-eventsscroll
16
The Machine

Selon la version de HTML que vous utilisez, vous pouvez utiliser l'événement onwheel, à la place.

L'événement onscroll ne fonctionne que si tous les éléments suivants sont tristes:

  1. Le div a overflow: auto, overflow: scroll, overflow-y: scroll, etc.
  2. Le div a actuellement une barre de défilement visible qui peut faire défiler.
  3. Le mouvement de la souris fait défiler la barre de défilement.

Donc, l'événement onscroll ne convient pas vraiment à la détection du mouvement de la roue de la souris générale.

Veuillez noter que l'événement onwheel est nouveau dans HTML 5. selon W3Schools , il est assez supporté.

17
Sildoreth

J'ai rayé ma tête sur celui-ci aussi, jusqu'à ce que je commence à en apprendre davantage sur les directives de DOCTYPE. L'attribut OnScroll n'est pas pris en charge dans la version la plus récente de la spécification HTML. Il va montrer comme syntaxe invalide dans Visual Studio. Cela pourrait fonctionner dans de nombreux navigateurs, mais c'est toujours un code invalide.

Au lieu de cela, votre événement Canan utilise JavaScript ou JQuery. J'utilise une approche comme celle-ci pour synchroniser le défilement sur deux Div distincts:

$("#gridTableContainer").scroll(function() {
    HandlingScrollingStuff();
});
4
Ripside

Oui, mais l'élément doit avoir une barre de défilement. Vous pouvez en donner un avec overflow: auto (Qui vous donne une barre de défilement lorsque le contenu est suffisamment grand) ou overflow: scroll. (Ceux-ci peuvent être définis spécifiquement pour x & y aussi overflow-y: scroll ...)

Bien qu'ils ne baissent pas une fois que le DIV a été défilé vers le bas, la fenêtre commencera à défiler. (Fondamentalement, si la div peut faire défiler, il intercepter l'événement de défilement, mais s'il ne peut pas alors passer à la page)

2
Caleb

Je sais que ce n'est peut-être pas exactement ce que vous recherchez, mais beaucoup de cadres JavaScript peuvent vous aider avec cela. Il n'est pas nécessaire que Div ait une barre de défilement pour vous accrocher aux événements de défilement.

Par exemple. Motools a le mousewheel événement. Démo ici . (Il a des barres de défilement, mais vous pouvez utiliser Firebug pour supprimer les barres de défilement et essayer - cela fonctionne toujours).

Je me suis utilisé moi-même sur un Site J'ai fait un moment de retour. Si vous faites défiler tout en maintenant votre souris sur les images, il empêche le défilement de la page par défaut et glisse plutôt la barre d'image.

1
mqchen

JQuery Scroll () peut vous aider.

$("#gridTableContainer").scroll(function() {
    HandlingScrollingStuff();
});
0
MackMon