触发“虚拟”鼠标滚轮事件

发布于 2025-01-08 00:43:11 字数 303 浏览 0 评论 0原文

有没有办法用任意增量触发滚轮事件？

就像 jQuery 对“点击”所做的那样：

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

我需要类似的东西，只是用一个滚轮：

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

我不能用 CSS 欺骗做“假它”之类的事情，我需要触发实际的本机（或尽可能接近）事件。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

最舍不得你 2025-01-15 00:43:11

检查下面的代码以触发向下滚动

let wheelEvent = new WheelEvent('wheel', {
  deltaY: 1,
  deltaMode: 1
});
document.getElementById('selector').dispatchEvent(wheelEvent);

<div id="selector"></div>

参考：https://developer.mozilla.org/en-US/文档/Web/API/WheelEvent

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

回复收藏 0 原文

娇柔作态 2025-01-15 00:43:11

如果您编写了任何内容，这将调用滚动函数

$(window).scroll();

This will call the scroll function if you have written any

$(window).scroll();

回复收藏 0 原文

合约呢 2025-01-15 00:43:11

您需要使用 jQuery.Event
例如：

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

在此处查看更多信息： http://api.jquery.com/category/events /事件对象/

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/

回复收藏 0 原文

熊抱啵儿 2025-01-15 00:43:11

您可以使用 jquery 滚动事件，并在回调时进行数学计算。请找到有用的代码片段。

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

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>

回复收藏 0 原文

猫弦 2025-01-15 00:43:11

我用这段代码制作了我自己的卷轴。

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

我添加了 * -1 来反转。你可以删除它。

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 原文

天赋异禀 2025-01-15 00:43:11

您可以尝试在控制台中输入此内容，并查看其效果：

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

其中 200 是任意数字。
同样，您也可以尝试使用scrollLeft：

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

或者

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

您可以尝试使用这个概念和窗口setInterval（）方法。

此外......

您可以按如下方式获取元素的偏移量：

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

这将为您提供如下结果：

{top: 9037.1875, left: 268}

您可以使用如下所示滚动到该元素：

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

或者........

如果您只想在首次加载网站时将网站向下滚动到特定元素，您可以使用具有 id 的元素来执行此操作：

将 #idnamehere 添加到您正在搜索的网址末尾。页面上必须存在具有该 id 名称的元素。

例如，比较这些 URL 以及在 URL 地址栏中输入它们时得到的内容：

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

末尾带有 #vote-to-add-section 的会自动向下滚动到 id 的元素#投票添加部分。

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.

回复收藏 0 原文

叶落知秋 2025-01-15 00:43:11

你试过这个吗？ http://jquerytools.org/documentation/toolbox/mousewheel.html
一个“控制鼠标滚轮”的插件:)

回复收藏 0 原文

青巷忧颜 2025-01-15 00:43:11

尝试：

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

（完全未经测试。灵感来自在 div 上时绑定到滚轮)

回复收藏 0 原文

木森分化 2025-01-15 00:43:11

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

实际上这效果更好：

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

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

actually this works better:

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

回复收藏 0 原文

请帮我爱他 2025-01-15 00:43:11

您好，您可以通过添加事件侦听器来做到这一点。我已经搜索了相同的内容并得到了下面的代码片段并且它正在工作。相同要求，

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

检查您是否有基于增量变量的

您可以编写自己的自定义功能。在 html 5 中，正在处理鼠标滚动事件，您也可以尝试这种方式

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 原文

~没有更多了~