2012-02-22 304 views
17

有没有办法触发带有任意三角形的滚轮事件? 就像jQuery也与“点击”,如:触发'虚拟'鼠标滚轮事件

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

我需要的东西一样,只是像一个滚轮:

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

我不能做任何事情,像“假货”用CSS挂羊头卖狗肉,我需要触发实际的本地(或尽可能接近)事件。

谢谢!

+0

你检查了[jQuery文件](http://api.jquery.com/scroll/) – Chad 2012-02-22 22:48:30

+0

是的,滚动是基于位置的,我需要实际的本地调用滚动事件,因为有一些绑定到这些事件的行动。无论如何感谢 – escusado 2012-02-23 00:04:54

+0

尝试检查这篇文章http://www.howtocreate.co.uk/tutorials/javascript/browserwindow我认为它有你需要的。 – 2012-02-22 22:49:28

回答

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

其实这工作得更好:

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

这将调用,如果你的滚动功能已经写了任何

$(window).scroll(); 
-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> 
------------------------------------------------------------ 

HTML 5中的鼠标滚轮事件正在处理,你可以以这种方式也

+0

我相信这违反了“我不能做任何事情,像'假'它与CSS技巧”。 – 2014-03-17 19:28:22

-2

我在做我自己的滚动使用此代码尝试。

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

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

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/

+0

在文档中,它并没有说它以跨浏览器的方式支持'delta'属性。实际上,它甚至没有提到它在事件对象中完全支持它。 – Alvaro 2015-06-29 19:46:14

+2

它似乎没有工作:http://jsfiddle.net/95ssxLc9/1/ – Alvaro 2015-06-29 19:51:19

1

您可以使用jQuery的滚动事件和回调U可以做乌尔数学。请找到snipet有用的代码。

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

你可以试着输入这个到控制台,看看它的效果:

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名添加到您要搜索的网址的末尾。在页面上必须有一个具有该id名称的元素。

例如比较这些URL的,当你在URL地址栏输入他们,你会得到什么:

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

的一个以#票对加节末是自动向下滚动到id为#vote-to-add-section的元素。