有没有办法用任意增量触发滚轮事件?
就像 jQuery 中的“点击”一样:
$('#selector').trigger('click');
我需要类似的东西,只需一个滚轮即可:
$('#selector').trigger('DOMMouseScroll',{delta: -650});
//or mousewheel for other browsers
我不能用 CSS 欺骗来做“假装”之类的事情,我需要触发实际的本机(或尽可能接近)事件。
检查下面的代码以触发向下滚动
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
如果您编写了滚动函数,这将调用滚动函数
$(window).scroll();
你需要使用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/
您可以使用 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>
你尝试过这个吗? http://jquerytools.org/documentation/toolbox/mousewheel.html 一个“控制鼠标滚轮”的插件:)
我用这段代码制作了我自己的卷轴。
$('body').bind('mousewheel DOMMouseScroll', function(event) {
var delta = Math.max(-1, Math.min(1, (event.originalEvent.wheelDelta || -event.originalEvent.detail))) * -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 的元素。
this.trigger("mousewheel", {intDelta:0, deltaX:0, deltaY:0});
实际上这样效果更好:
this.trigger("mousewheel", [0])
您好,您可以通过添加事件监听器来做到这一点。我已经搜索了相同的内容并得到了下面的代码片段并且它正在工作。检查您是否有相同的要求
<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 中,正在处理鼠标滚动事件,你也可以尝试这种方式