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

问题描述 投票:0回答:10

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

就像 jQuery 中的“点击”一样:

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

我需要类似的东西,只需一个滚轮即可:

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

我不能用 CSS 欺骗来做“假装”之类的事情,我需要触发实际的本机(或尽可能接近)事件。

javascript jquery mouseevent mousewheel
10个回答
2
投票

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

let wheelEvent = new WheelEvent('wheel', {
  deltaY: 1,
  deltaMode: 1
});
document.getElementById('selector').dispatchEvent(wheelEvent);
<div id="selector"></div>

参考:https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent


0
投票

如果您编写了滚动函数,这将调用滚动函数

$(window).scroll();

0
投票

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


0
投票

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


-1
投票

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


-1
投票

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

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

我添加了

* -1
来反转。你可以删除它。


-1
投票

您可以尝试在控制台中输入以下内容,然后查看其效果:

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 的元素。


-3
投票

尝试:

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

(完全未经测试。灵感来自于在 div 上绑定到滚轮


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

实际上这样效果更好:

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

-5
投票

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


<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 中,正在处理鼠标滚动事件,你也可以尝试这种方式

© www.soinside.com 2019 - 2024. All rights reserved.