Имитация события прокрутки с использованием 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, на события мыши, такие как mouseover, mousedown и т. Д.

Однако по некоторым причинам код для имитации события прокрутки не работает ... Пожалуйста, помогите мне.По сути, мой вопрос заключается в том, как мне симулировать событие прокрутки.Спасибо.

Answer 1

Итак, я знаю, что мне нужно имитировать это тоже.для меня это, когда у вас есть лайтбокс с коробкой переполнения, он вам понадобится.Я могу вспомнить только один случай из многих.ищу ответ.Просто подумал, что поделюсь тем, где я нахожусь, ты не с jQuery.Ui.Ipad, я буду Google это ... но вот то, что я получил до сих пор и работает, но не идеально.

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

Опять не идеально и ищет исправить это .. но это по крайней мере работает.Теперь обратите внимание, что это div, который использует ползунок jQuery UI для полосы прокрутки, как (у меня она вертикальная), как показано в

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

Надежда, которая подстегивает некоторые идеи.Если я получу супер стабильный ответ, я вернусь.Ура-Джереми

Answer 2

Для меня сработало событие 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);

Обратите внимание, что тип события DOMMouseScroll для FireFox.

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

Я думаю, что люди не понимают, почему вы бы переместили управление прокруткой.Я понимаю, почему вы хотите имитировать события мыши, но прокрутка, возможно, не должна быть одной из них.

Обычно для изменения прокрутки вы можете просто получить прокрутку с помощью:

var top = document.body.scrollTop;

и установитьс:

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