jquery 使用Javascript模拟滚动事件

4dbbbstv  于 2022-12-22  发布在  jQuery
关注(0)|答案(5)|浏览(90)

我正在尝试使用Javascript for移动的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的一部分,它基本上将touchstarttouchmovetouchend等触摸事件Map到mouseovermousedown等鼠标事件
然而,由于某些原因,模拟滚动事件的代码不工作...请帮助我。所以本质上我的问题是我如何模拟滚动事件。

j9per5c4

j9per5c41#

我想人们对你为什么要覆盖滚动控件感到困惑。我可以理解你为什么要模仿鼠标事件,但滚动可能不应该是其中之一。
通常,更改滚动条时,只需使用以下命令即可获得滚动条:

var top = document.body.scrollTop;

并设置:

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

bgibtngc2#

所以,我知道我也需要模拟它。对我来说,当你有一个带有溢出框的lightbox时,你会需要它。只是我能想到的许多例子中的一个。期待一个答案。只是想我会分享我所处的位置,你不会用jQuery.Ui。iPad我会谷歌一下. a.但这里是我到目前为止得到的,工作正常,但不完美。

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滑块作为滚动条(thou在我的,它是垂直的),如所示
http://jqueryui.com/demos/slider/#side-scroll
希望这能激发一些想法。如果我得到一个超级稳定的答案,我会回来的。干杯-杰里米

qoefvg9y

qoefvg9y3#

我需要它来编写单元测试,为此我需要模拟滚动事件

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

pw9qyyiw

pw9qyyiw4#

对我有效的事件是mousewheel,第5个参数需要为正才能向下滚动,为负才能向上滚动。

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

请注意,FireFox的事件类型为DOMMouseScroll

fhity93d

fhity93d5#

现在应使用CustomEvent创建事件,new CustomEvent("wheel", { detail: { deltaY: 1 } })本身。document.createEvent已弃用
https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent
我构建了一个实用函数,每帧滚动一个像素

const startFakeScrolling = (container: HTMLDivElement) => {
  const cb = () => {
    container.dispatchEvent(
      new CustomEvent("wheel", { detail: { deltaY: 1 } })
    );
    window.requestAnimationFrame(cb);
  };
  window.requestAnimationFrame(cb);
};

您还需要修改事件侦听器以使用详细信息,因为deltaY将是未定义的

const delta = e.deltaY != null ? e.deltaY : (e.detail as any).deltaY;

相关问题