Trigger 'dummy' mouse wheel event

2019-03-23 05:14发布

站内问答 / JavaScript
2039 9 3

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!

9条回答
Juvenile、少年°
2楼-- · 2019-03-23 05:44

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.

查看更多
0人赞 添加讨论(0) 举报
smile是对你的礼貌
3楼-- · 2019-03-23 05:44

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

查看更多
0人赞 添加讨论(0) 举报
Bombasti
4楼-- · 2019-03-23 05:46

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.

查看更多
0人赞 添加讨论(0) 举报
萌系小妹纸
5楼-- · 2019-03-23 05:50

Try:

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

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

查看更多
0人赞 添加讨论(0) 举报
小情绪 Triste *
6楼-- · 2019-03-23 05:50 
this.trigger("mousewheel", {intDelta:0, deltaX:0, deltaY:0});

actually this works better:

this.trigger("mousewheel", [0])
查看更多
0人赞 添加讨论(0) 举报
小情绪 Triste *
7楼-- · 2019-03-23 05:58

This will call the scroll function if you have written any

$(window).scroll();
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(3)