使用Javascript模擬滾動事件

Question

我正在嘗試使用Javascript爲Mobile Safari模擬滾動事件。 我使用以下代碼

var evt = document.createEvent("MouseEvents");  
evt.initMouseEvent("scroll", true, true, window,0, 0, 0, 0, 0, false, false, false, false, 0, null); 

上面的代碼是一個jQuery插件jQuery.UI.Ipad基本上映射觸摸事件等touchstart，touchmove，touchend像鼠標懸停，鼠標按下鼠標事件的一部分，等等

由於某些原因，模擬滾動事件的代碼無法正常工作......請幫助我。所以基本上我的問題是如何模擬滾動事件。 謝謝。

Answer 1

我認爲人們對於爲什麼會忽略滾動控件感到困惑。我可以看到你爲什麼要模仿鼠標事件，但滾動可能不應該是其中之一。

通常用於滾動改變你可以得到滾動帶：

var top = document.body.scrollTop; 

並與設置：

document.body.scrollLeft = sX; 
document.body.scrollTop = sY; 

Answer 2

所以，我知道我需要模擬這一點。對我來說，這是當你有一個水箱的燈箱，你會需要它。我能想到的只有很多例子。尋找答案。只是以爲我會分享我在哪裏，你沒有與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; 
    }); 

再次不完美，並期待解決它..但它是在最起碼的工作。現在請注意，這是馬刺的一些想法在

http://jqueryui.com/demos/slider/#side-scroll

表示希望這是使用jQuery UI滑塊滾動條作爲一個div（在我你是垂直的）。如果我得到一個超級穩定的答案，我會回來。 乾杯-Jeremy

Answer 3

我需要這個來寫單元測試，爲此，我需要模擬一個滾動事件

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

有關詳細信息：https://developer.mozilla.org/en-US/docs/Web/API/event.initUIEvent

Answer 4

爲我工作的事件是mousewheel ，第5個參數需要爲scrolldown爲正值，在scrollup爲負值。

var evt = document.createEvent("MouseEvents");  
evt.initMouseEvent("mousewheel", true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null); 

請注意，FireFox的事件類型爲DOMMouseScroll。