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!
Check this below code to trigger a scrolldown
let wheelEvent = new WheelEvent('wheel', {
deltaY: 1,
deltaMode: 1
});
document.getElementById('selector').dispatchEvent(wheelEvent);<div id="selector"></div>Reference: https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent
This will call the scroll function if you have written any
$(window).scroll();
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/
delta property in a cross browser way. Actually, it doesn't even mention it supports it at all in event objects. –
Armament 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>Have you tried this? http://jquerytools.org/documentation/toolbox/mousewheel.html A plugin to "take control of the mousewheel" :)
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.
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
or
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.
Try:
.trigger("mousewheel", {wheelDelta: 100})
(Completely untested. Inspired by Binding to the scroll wheel when over a div)
this.trigger("mousewheel", {intDelta:0, deltaX:0, deltaY:0});
actually this works better:
this.trigger("mousewheel", [0])
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
© 2022 - 2024 — McMap. All rights reserved.