Question

是否有办法触发具有任意delta的滚轮事件。就像jQuery使用'click'一样：

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

我需要像滚轮一样的东西：

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

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

三江源！

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

Answer 2

你可以使用jquery滚动事件，在回电话你可以做数学。请找到有用的代码snipet。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

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

最后带#thow-to-add-section的那个会自动向下滚动到id为＃vote-to-add-section的元素。

Answer 4

如果你写了任何

，这将调用滚动功能

$(window).scroll();

Answer 5

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

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

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

Answer 6

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

Answer 7

尝试：

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

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

Answer 8

您好，您可以通过添加事件侦听器来实现。我搜索了同样的内容并获得了以下代码片段，它正在运行。检查你有相同的要求

<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鼠标滚动事件正在处理中，您也可以尝试

Answer 9

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

实际上这效果更好：

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

触发'虚拟'鼠标滚轮事件

9 个答案: