Trigger 'dummy' Mouse Wheel Event

November 23, 2023 Post a Comment

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 w

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

Solution 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 wellconsole.log("scolling....");
  //update with the delta u required.
});

<htmllang="en"><head><metacharset="utf-8"><title>scroll demo</title><style>div {
    color: blue;
  }
  p {
    color: green;
  }
  span {
    color: red;
    display: none;
  }
  </style><scriptsrc="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>

Solution 3:

This will call the scroll function if you have written any

$(window).scroll();

Solution 4:

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.

Solution 5:

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

Baca Juga

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.

JavaScript Free