Tout le monde connaît une astuce mousehover/alternative qui se déclenche lors du défilement avec le clavier

Y at-il une méthode alternative ou une astuce pour la méthode hover qui peut déclencher une fonction lorsque le curseur se déplace d'un div à l'autre lorsque l'utilisateur fait défiler la page.Tout le monde connaît une astuce mousehover/alternative qui se déclenche lors du défilement avec le clavier

J'ai sorte de a fonctionné en utilisant javascript (jQuery) sur l'événement de survol du post div actuel. Cependant, j'ai remarqué que l'événement hover ne se déclenche que lorsque la souris est réellement déplacée. Si la page défile à l'aide du clavier (page) haut/bas, elle ne se déclenche pas.

(je peux constater que soup.io par exemple, a trouvé un moyen d'obtenir ce travail, mais je ne peux pas trouver comment ils le font)

Source

2009-06-10 davur

Je ne vois pas travailler sur soup.io dans Firefox. Quel navigateur utilisez-vous et quel comportement voyez-vous? –

Désolé, j'aurais pu être plus clair je vois. Voici quelques informations supplémentaires. Ce que je vais faire est la suivante: Sur un blog (davur.net) j'affiche les commentaires à côté de chaque message, mais je l'ai fait passer à l'opacité .30. Mais pour le post actuel, je souhaite que les commentaires se fondent dans une opacité de 1.00. Ceci est actuellement implémenté en utilisant l'événement hover. Mais ne se déclenche pas au défilement du clavier. Ma comparaison avec soup.io est qu'ils ont un [# | republier | réagir | share] qui est initialement caché mais ne s'affiche que sur le post actuel. Cela se déclenche à la fois sur le vol stationnaire et sur le défilement du clavier. – davur

Le truc de soup.io (mais ils le font) se déclenche sur le défilement du clavier sur Firefox 3.0, Safari 4, Chrome, IE8 (mais pas toujours), Opera 9.64 (mais avec un léger retard). Mon approche hover fonctionne avec Firefox et Opera mais pas avec Chrome, IE ou Safari. – davur

Malheureusement, c'est assez compliqué; vous ne pouvez plus compter sur l'événement onMouseOver - le seul événement qui se déclenche lorsqu'une page défile est onScroll. Les étapes impliquées:

Parcourez les éléments, en stockant chacune de leurs largeurs, hauteurs et décalages (distance de gauche/haut de l'écran) dans un tableau.
Lorsque l'événement onScroll est déclenché, vérifiez la dernière position connue du curseur par rapport à tous les éléments choisis (passez par le tableau) - si le curseur se trouve sur l'un des éléments, appelez le gestionnaire.

prototype rapide (non fiable): http://pastie.org/507589

Source

2009-06-10 18:42:32 James

J'aime cette idée. Personnellement, je n'aurais besoin que de hauteurs et de décalages car les divs/posts sont listés verticalement. Je vais donner un coup de feu. – davur

Avez-vous un échantillon? Je suppose que la disposition des éléments sur la page bloque l'événement mouseover. Mon exemple simple ci-dessous fonctionne comme vous l'avez décrit. Avec le curseur en haut de la page et en utilisant la navigation au clavier, les événements mouseover sont déclenchés.

<html> 
<body> 
<script> 
function log(text) 
{ 
    document.getElementById('logger').value += text + "\n"; 
} 
</script> 

<div id="div1" style="background: yellow; height: 100px;margin-top: 100px" onmouseover="log('mouseover div1');"> 
div1 
</div> 
<textarea id="logger" cols="60" rows="12" style="float:right;"></textarea> 
<div id="div2" style="background: red; height: 1000px" onmouseover="log('mouseover div2');"> 
div2 
</div> 
</body> 
</html>

Source

2009-06-10 17:45:29

Ceci est similaire à ce que j'ai déjà. Il ne fonctionne pas sur le défilement du clavier sur Chrome, IE ou Safari. – davur

Vous êtes à la recherche de l'événement mousewheel.

document.getElementById('myDiv').onmousewheel = function() { 
    alert('You win!'); 
    alert('Seriously! It's just like that'); 
};

Je ne testé cela dans Chrome (WebKit)

Source

2011-11-16 00:41:08

Tout le monde connaît une astuce mousehover/alternative qui se déclenche lors du défilement avec le clavier

Répondre

Questions connexes