Javascript 使用Javascript模拟滚动事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6761659/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simulate scroll event using Javascript
提问by testndtv
I am trying to Simulate a scroll event using Javascript for Mobile Safari. I am using the following code
我正在尝试使用 Javascript for Mobile Safari 模拟滚动事件。我正在使用以下代码
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("scroll", true, true, window,0, 0, 0, 0, 0, false, false, false, false, 0, null);
The above code is part of a jQuery plugin jQuery.UI.Ipad which basically maps touch events like touchstart,touchmove,touchend to mouse events like mouseover, mousedown,etc
上面的代码是 jQuery 插件 jQuery.UI.Ipad 的一部分，它基本上将 touchstart、touchmove、touchend 等触摸事件映射到 mouseover、mousedown 等鼠标事件
Howevert for some reasons the code for simulating a scroll event is not working...Please help me. So essentially my question is how do I simulate the scroll event. Thank you.
但是由于某些原因，模拟滚动事件的代码不起作用......请帮助我。所以基本上我的问题是如何模拟滚动事件。谢谢你。
采纳答案by MrHayman
I think people are confused as to why you would overide the scroll control. I can see why you want to imitate mouse events, but scroll maybe should not be one of them.
我认为人们对为什么要覆盖滚动控件感到困惑。我明白你为什么要模仿鼠标事件，但滚动可能不应该是其中之一。
Usually for scroll changes you can just get the scroll with:
通常对于滚动更改，您可以通过以下方式获取滚动：
var top = document.body.scrollTop;
And set with:
并设置：
document.body.scrollLeft = sX;
document.body.scrollTop = sY;
回答by jeremy.bass
So, I know I' need to simulate it too. for me it's when you have a lightbox with a overflow box that you would need it. Just one case of many I can think of. looking to for an answer. Just thought I'd share where I'm at, thou not with the jQuery.Ui.Ipad I will Google that.. but here is what I got so far and does work but not perfectly.
所以，我知道我也需要模拟它。对我来说，当你有一个带溢出盒的灯箱时，你会需要它。只是我能想到的众多案例中的一种。寻找答案。只是想我会分享我的位置，你不是用 jQuery.Ui.Ipad 我会谷歌那个..但这是我到目前为止所得到的并且确实有效但并不完美。
var inTouch=false;
var timers_arr = new Array();
var c=0;
var t;
var timer_is_on=0;
//-------------------------------------------------------------------------------------------------------------------------------------------------------------
// jeremy's timer functions
//-------------------------------------------------------------------------------------------------------------------------------------------------------------
function clearCount(timer){
/// clear the time from timer
clearTimeout(timers_arr[timer]);
/// Make sure it's clear
timers_arr[''+timer+'']=0;
delete timers_arr[''+timer+''];
}
function setCount(timer,time,func){
clearCount(timer);
if(timers_arr[timer]==0||typeof(timers_arr[timer]) === 'undefined'){
timers_arr[timer]=setTimeout(function(){
func();
},time);
}
}
function updatePos(evt,startY){
setCount('touchmove',1,function(){
var orig = evt.originalEvent;
var curY = orig.changedTouches[0].pageY;
var y = curY - startY;
var sliderVal = $("#slider-vertical").slider("value");
sliderVal += (y*.008);
$("#slider-vertical").slider("value", sliderVal);
updatePos(evt,startY);
});
setCount('touchmove_anitMotion',200,function(){
clearCount('touchmove');
clearCount('touchmove_anitMotion');
});
}
var startX=0;
var startY=0;
var x=0;
var y=0;
var direction='';
$('body').bind("onorientationchange", updateOrientation, false);
$('#scroll-pane').live("touchstart", function(evt){
inTouch=true;
startX = event.targetTouches[0].pageX;
startY = event.targetTouches[0].pageY;
});
$('#scroll-pane').live("touchmove", function(evt){
evt.stopPropagation();
evt.preventDefault();
updatePos(evt,startY);
});
$('#scroll-pane').live("touchend", function(evt){
startX=0;
startY=0;
clearCount('touchmove');
inTouch=false;
});
$('#scroll-pane').live("touchcancel", function(evt){
startX=0;
startY=0;
clearCount('touchmove');
inTouch=false;
});
Again not perfect and looking to fix it.. but it's at the least working. Now note, this is a div that is using the jQuery UI slider for a scroll bar as (thou in mine it's vertical) shown in
再次不完美并希望修复它......但它至少有效。现在请注意，这是一个 div，它使用 jQuery UI 滑块作为滚动条（你在我的中它是垂直的）显示在
http://jqueryui.com/demos/slider/#side-scroll
http://jqueryui.com/demos/slider/#side-scroll
Hope that spurs some ideas. If I get a super stable answer I'll get back. Cheers -Jeremy
希望能激发一些想法。如果我得到一个超级稳定的答案，我会回来的。干杯 - 杰里米
回答by dekdev
I needed this to write a unit test , for which i need to simulate a scroll event
我需要这个来编写单元测试，为此我需要模拟滚动事件
function dispatchScroll(target,newScrollTop) {
target.scrollTop = newScrollTop;
var e = document.createEvent("UIEvents");
// creates a scroll event that bubbles, can be cancelled,
// and with its view and detail property initialized to window and 1,
// respectively
e.initUIEvent("scroll", true, true, window, 1);
target.dispatchEvent(e);
}
For more details : https://developer.mozilla.org/en-US/docs/Web/API/event.initUIEvent
更多详情：https: //developer.mozilla.org/en-US/docs/Web/API/event.initUIEvent
回答by Timm
The event that worked for me was mousewheel, and the 5th parameter needs to be positive for scrolldown and negative for scrollup.
对我mousewheel有用的事件是，第 5 个参数对于向下滚动需要为正，对于向上滚动需要为负。
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("mousewheel", true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
Note that the event type is DOMMouseScrollfor FireFox.
请注意，事件类型适用DOMMouseScroll于 FireFox。
