Trigger 'dummy' mouse wheel event

问题

Is there a way to trigger a scroll wheel event with an arbitrary delta. Just like jQuery does with 'click' like:

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

I need something like that just with an scrollwheel like:

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

I can't do anything like 'fake it' with css trickery, I need to trigger the actual native (or as close as possible) event.

Thankyou!

回答1:

You need to use jQuery.Event For example:

// 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 );

Check more here: http://api.jquery.com/category/events/event-object/

回答2:

You can use the jquery scroll event and on call back u can do ur math. Please find the code snipet usefull.

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

回答3:

You can try typing this into the console, and see its effects:

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

where 200 is an arbitrary number. Similarly, you can also try this with scrollLeft:

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

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

You could try playing with this concept and the window setInterval() method.

Additionally........

You can get the offset of an element as follows:

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

which will give you a result like:

{top: 9037.1875, left: 268}

You could scroll to that element with something like this:

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

Alternatively........

If you just want the site to already be scrolled down to a particular element when the site is first loaded, you can do this with elements that have an id:

Add #idnamehere to the end of a url you are seaching. There must be an element with that id name on the page.

For example compare these URL's, and what you get when you enter them in the URL address bar:

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

The one with #vote-to-add-section at the end is automatically scrolled down to the element with id #vote-to-add-section.

回答4:

This will call the scroll function if you have written any

$(window).scroll();

回答5:

I used this code in making my own scroll.

$('body').bind('mousewheel DOMMouseScroll', function(event) {
     var delta = Math.max(-1, Math.min(1, (event.originalEvent.wheelDelta || -event.originalEvent.detail))) * -1;
}

I added * -1 to invert. you can remove it.

回答6:

Have you tried this? http://jquerytools.org/documentation/toolbox/mousewheel.html A plugin to "take control of the mousewheel" :)

回答7:

Try:

.trigger("mousewheel", {wheelDelta: 100})

(Completely untested. Inspired by Binding to the scroll wheel when over a div)

回答8:

Hi you can do that by adding a event listener. I have searched for the same and got the below code snippet and it is working. check you have the same requirement

<html>
<head>
<title>Mouse Scroll Wheel example in JavaScript</title>
 <style>
 #scroll {
 width: 250px;
 height: 50px;
 border: 2px solid black;
 background-color: lightyellow;
 top: 100px;
 left: 50px;`enter code here`
 position:absolute;
 }
 </style>
 <script language="javascript">
 window.onload = function()
 {
//adding the event listerner for Mozilla
if(window.addEventListener)
    document.addEventListener('DOMMouseScroll', moveObject, false);

//for IE/OPERA etc
document.onmousewheel = moveObject;
 }
function moveObject(event)
{
var delta = 0;

if (!event) event = window.event;

// normalize the delta
if (event.wheelDelta) {

    // IE and Opera
    delta = event.wheelDelta / 60;

} else if (event.detail) {

    // W3C
    delta = -event.detail / 2;
}

var currPos=document.getElementById('scroll').offsetTop;

//calculating the next position of the object
currPos=parseInt(currPos)-(delta*10);

//moving the position of the object
document.getElementById('scroll').style.top = currPos+"px";
document.getElementById('scroll').innerHTML = event.wheelDelta + ":" + event.detail;
}
</script>
</head>
<body>
Scroll mouse wheel to move this DIV up and down.
<div id="scroll">Event Affect</div>
</body>
</html>
------------------------------------------------------------

based on the delta variable you can write your own custom functionality.

In html 5 mouse scroll event is being handled you can try in that way also

回答9:

this.trigger("mousewheel", {intDelta:0, deltaX:0, deltaY:0});

actually this works better:

this.trigger("mousewheel", [0])

来源：https://stackoverflow.com/questions/9404406/trigger-dummy-mouse-wheel-event

标签

javascript

jquery

mouseevent

mousewheel

scrollwheel