web-dev-qa-db-fra.com

Déclencher un événement de roue de souris "factice"

Existe-t-il un moyen de déclencher un événement de molette de défilement avec un delta arbitraire. Tout comme jQuery le fait avec 'clic' comme:

$('#selector').trigger('click');

J'ai besoin de quelque chose comme ça juste avec une molette comme:

$('#selector').trigger('DOMMouseScroll',{delta: -650});
//or mousewheel for other browsers

Je ne peux rien faire de "faux" avec la ruse CSS, je dois déclencher l'événement natif (ou le plus proche possible).

Je vous remercie!

javascriptjquerymouseeventmousewheelscrollwheel
19
escusado

Vous devez utiliser jQuery.Event Par exemple:

// Create a new jQuery.Event object with specified event properties.
var e = jQuery.Event( "DOMMouseScroll",{delta: -650} );

// trigger an artificial DOMMouseScroll event with delta -650
jQuery( "#selector" ).trigger( e );

Vérifiez plus ici: http://api.jquery.com/category/events/event-object/

1
meghea.iulian

Vous pouvez utiliser l'événement de défilement jQuery et sur rappel, vous pouvez faire vos calculs. S'il vous plaît trouver l'extrait de code utile.

//to make dummy paragraphs
$( "p" ).clone().appendTo( document.body );
$( "p" ).clone().appendTo( document.body );
$( "p" ).clone().appendTo( document.body );
$( "p" ).clone().appendTo( document.body );
$( "p" ).clone().appendTo( document.body );
$( "p" ).clone().appendTo( document.body );
//dummy paragraphs end here
//the below scroll() callback is triggered eachtime mouse wheel scroll happens
$( window ).scroll(function() { //i reference to window if u want u can iD a div and give div ID reference as well
  console.log("scolling....");
  //update with the delta u required.
});
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scroll demo</title>
  <style>
  div {
    color: blue;
  }
  p {
    color: green;
  }
  span {
    color: red;
    display: none;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>Try scrolling the iframe.</div>
<p>Paragraph - <span>Scroll happened!</span></p>
 

 
</body>
</html>

1
karthik

Vous pouvez essayer de taper ceci dans la console et voir ses effets:

document.body.scrollTop = document.body.scrollTop + 200

où 200 est un nombre arbitraire. De même, vous pouvez également essayer ceci avec scrollLeft:

document.body.scrollLeft = document.body.scrollLeft + 200

ou

document.body.scrollLeft = document.body.scrollLeft - 200

Vous pouvez essayer de jouer avec ce concept et la méthode window setInterval ().

En outre ........

Vous pouvez obtenir le décalage d'un élément comme suit:

jQuery("#vote-to-add-section").offset()

ce qui vous donnera un résultat comme:

{top: 9037.1875, left: 268}

Vous pouvez faire défiler jusqu'à cet élément avec quelque chose comme ceci:

document.body.scrollTop = jQuery("#vote-to-add-section").offset().top

Alternativement ........

Si vous souhaitez simplement faire défiler le site jusqu'à un élément particulier lors du premier chargement du site, vous pouvez le faire avec des éléments ayant un identifiant:

Ajoutez #idnamehere à la fin de l'URL que vous recherchez. Il doit y avoir un élément avec cet identifiant sur la page. 

Par exemple, comparez ces URL et ce que vous obtenez lorsque vous les entrez dans la barre d'adresse d'URL:

https://travel.usnews.com/rankings/worlds-best-vacationshttps://travel.usnews.com/rankings/worlds-best-vacations/#vote-to -add-section

Celui avec # vote-to-add-section à la fin est automatiquement défilé jusqu'à l'élément avec id # vote-to-add-section.

0
kig