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

【问题标题】：Trigger 'dummy' mouse wheel event触发“虚拟”鼠标滚轮事件
【发布时间】：2012-03-13 08:21:18
【问题描述】：

有没有办法用任意增量触发滚轮事件。就像 jQuery 对 'click' 所做的那样：

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

我需要这样的东西，只需要一个滚轮，比如：

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

我不能用 css 技巧做任何“假装”之类的事情，我需要触发实际的原生（或尽可能接近）事件。

谢谢！

【问题讨论】：

你检查过jQuery Docs
试试看这篇文章howtocreate.co.uk/tutorials/javascript/browserwindow我觉得它有你需要的。
对不起，很遗憾我需要触发事件，而不是仅仅找到'where'是页面的滚动。问题是我需要在许多元素、文档和其他元素上触发它，因为有一些 JS 功能绑定到那些执行其他操作和滚动的事件（滚轮）。我需要我的触发器在任何情况下都能正常工作，唯一的方法是触发元素上的本机事件。谢谢你顺便说一句:)
是的，滚动是基于位置的，我需要对滚轮事件进行实际的本地调用，因为这些事件绑定了一些操作。还是谢谢
这可能会有所帮助，它使用的是原生 js 而不是 jquery：stackoverflow.com/questions/6735830/…

标签： javascript jquery mouseevent mousewheel scrollwheel

【解决方案1】：

你需要使用 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/event-object/

【讨论】：

在文档中并没有说它以跨浏览器的方式支持 delta 属性。实际上，它甚至没有提到它在事件对象中完全支持它。

【解决方案2】：

您可以使用 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>

【讨论】：

【解决方案3】：

如果你写了，这将调用滚动函数

$(window).scroll();

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

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

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为#vote-to-add-section的元素。

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

试试：

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

（完全未经测试。灵感来自Binding to the scroll wheel when over a div）

【讨论】：

对不起没用我正在尝试寻找另一种使用操作系统级宏应用程序的方法。无论如何谢谢:)

【解决方案8】：

您好，您可以通过添加事件侦听器来做到这一点。我搜索了相同的内容并获得了以下代码 sn-p 并且它正在工作。检查您是否有相同的要求

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

您可以根据 delta 变量编写自己的自定义功能。

在 html 5 中鼠标滚动事件正在被处理，你也可以尝试这种方式

【讨论】：

我认为这违反了“我不能用 css 技巧做任何事情，比如‘假装’”。

【解决方案9】：

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

实际上这样效果更好：

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

【讨论】：