복붙노트

[JQUERY] 이벤트 사용자가 스크롤을 중지

JQUERY

이벤트 사용자가 스크롤을 중지

해결법

  1. 1.당신은 스크롤 () 즉, 각 회 사용자가 스크롤을 덮어 유도 할 수있는 시간을 제한해야 할 수 있습니다. 그런 식으로, 그는 스크립트가 실행됩니다 (밀리 초)의 일정 금액 후 정지 할 때,하지만 그는 그 동안 스크롤하면 카운터는 다시 시작하고 그가 다시 스크롤 완료 될 때까지 스크립트가 대기합니다.

    당신은 스크롤 () 즉, 각 회 사용자가 스크롤을 덮어 유도 할 수있는 시간을 제한해야 할 수 있습니다. 그런 식으로, 그는 스크립트가 실행됩니다 (밀리 초)의 일정 금액 후 정지 할 때,하지만 그는 그 동안 스크롤하면 카운터는 다시 시작하고 그가 다시 스크롤 완료 될 때까지 스크립트가 대기합니다.

    최신 정보:

    이 질문은 다시 어떤 행동을 가지고 있기 때문에 나는뿐만 아니라 scrollEnd 이벤트를 추가하는 jQuery를 확장자를 업데이트 할 수 있습니다 생각 // 확장 : $ .fn.scrollEnd = 함수 (콜백 초과) { $ (이) .scroll (함수 () { VAR는이 $ (이) = $; 경우 ($ this.data ( 'scrollTimeout')) { 사항 clearTimeout ($ this.data ( 'scrollTimeout')); } this.data ( 'scrollTimeout'에서는 setTimeout (콜백 시간 초과)) $; }); }; // (A 1000MS의 타임 아웃)을 호출하는 방법 : $ (창) .scrollEnd (함수 () { 경고 ( '스크롤 중지'); } 1000); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

    긴 DIV

  2. 2.여기서, 사용자가 스크롤 기능을 중지 할 때를 발사의 setTimeout을 사용하여 간단한 예이다 :

    여기서, 사용자가 스크롤 기능을 중지 할 때를 발사의 setTimeout을 사용하여 간단한 예이다 :

    (function() {        
    var timer;
    $(window).bind('scroll',function () {
        clearTimeout(timer);
        timer = setTimeout( refresh , 150 );
    });
    var refresh = function () { 
        // do stuff
        console.log('Stopped Scrolling'); 
    };
})();

    스크롤 이벤트가 발사되는 동안 타이머가 삭제됩니다. 중지를 스크롤하면, 새로 고침 기능이 발생합니다.

    또는 플러그인과 같은 :

    $.fn.afterwards = function (event, callback, timeout) {
    var self = $(this), delay = timeout || 16;

    self.each(function () { 
        var $t = $(this);
        $t.on(event, function(){
            if ($t.data(event+'-timeout')) {
                clearTimeout($t.data(event+'-timeout'));
            }
            $t.data(event + '-timeout', setTimeout(function () { callback.apply($t); },delay));
        })
    });
    return this;
};

    (네임 스페이스) 사업부의 마지막 스크롤 이벤트의이 100ms 후 콜백을 해고하려면 :

    $('div.mydiv').afterwards('scroll.mynamespace', function(e) {
        // do stuff when stops scrolling
        $(this).addClass('stopped');
    }, 100
);

    나는 스크롤 및 크기 조정을 위해 이것을 사용합니다.

  3. 3.여기에 언급 된 동일한 아이디어를 기반으로 다른 더 일반적인 솔루션입니다 :

    여기에 언급 된 동일한 아이디어를 기반으로 다른 더 일반적인 솔루션입니다 :

    var delayedExec = function(after, fn) {
    var timer;
    return function() {
        timer && clearTimeout(timer);
        timer = setTimeout(fn, after);
    };
};

var scrollStopper = delayedExec(500, function() {
    console.log('stopped it');
});

document.getElementById('box').addEventListener('scroll', scrollStopper);

  4. 4.왜 그렇게 복잡해? 문서가 지적 하듯이,이 작품 http://jsfiddle.net/x3s7F/9/!

    왜 그렇게 복잡해? 문서가 지적 하듯이,이 작품 http://jsfiddle.net/x3s7F/9/!

    $('.frame').scroll(function() {
 $('.back').hide().fadeIn(100);
}

    http://api.jquery.com/scroll/.

    참고 : Windows 크롬의 스크롤 이벤트가 모두 다른 사람에게 다르게이다. 당신은에서, 예를 들어 같은 결과와 같은를 얻기 위해 빠른 스크롤해야 FF. 은 "X"기능에서 https://liebdich.biz/back.min.js 봐.

    내 얼마나 많은 MS 스크롤 이벤트 테스트에서 어떤 결과 :

    http://jsfiddle.net/TRNCFRMCN/1Lygop32/4/.

  5. 5.'scrollEnd'와 같은 그런 이벤트가 없습니다. 난 당신이 setInterval을 사용하는 동안 (예를 들어, 200 밀리)에 스크롤에 의해 반환 된 값 () 매를 일단 확인하고, 현재 및 이전 값 사이의 델타를 기록하는 것이 좋습니다. 델타가 제로가되면, 당신은 당신의 이벤트로 사용할 수 있습니다.

    'scrollEnd'와 같은 그런 이벤트가 없습니다. 난 당신이 setInterval을 사용하는 동안 (예를 들어, 200 밀리)에 스크롤에 의해 반환 된 값 () 매를 일단 확인하고, 현재 및 이전 값 사이의 델타를 기록하는 것이 좋습니다. 델타가 제로가되면, 당신은 당신의 이벤트로 사용할 수 있습니다.

  6. 6.JQuery와 모바일의 일부 scrollstart 및 scrollstop 기능이 있습니다.

    JQuery와 모바일의 일부 scrollstart 및 scrollstop 기능이 있습니다.

    예 scrollstop를 사용하여 :

    $(document).on("scrollstop",function(){
   alert("Stopped scrolling!");
});

    이 사람을 도움이되기를 바랍니다.

  7. 7.나는뿐만 아니라 이벤트 논의 듣게 onScrollEnd 구현 할 필요가 있었다. 타이머를 사용하는 아이디어는 나를 위해 작동합니다.

    나는뿐만 아니라 이벤트 논의 듣게 onScrollEnd 구현 할 필요가 있었다. 타이머를 사용하는 아이디어는 나를 위해 작동합니다.

    나는이 사용하는 자바 스크립트 모듈 패턴을 구현 :

    var WindowCustomEventsModule = (function(){

    var _scrollEndTimeout = 30;

    var _delayedExec = function(callback){
        var timer;
        return function(){
            timer && clearTimeout(timer);
            timer = setTimeout(callback, _scrollEndTimeout);
        }
    };

    var onScrollEnd = function(callback) { 
        window.addEventListener('scroll', _delayedExec(callback), false);         
    };

    return {
        onScrollEnd: onScrollEnd
    }
})();

// usage example
WindowCustomEventsModule.onScrollEnd(function(){
    //
    // do stuff
    //
});

    이 의지의 도움을 희망 / 누군가에게 영감을

  8. 8.나는 (시작하고 콜백 함수의 컨테이너 끝 scroll.chain 두 개의 배열을 포함하는 객체 인 것을 주) 내가 함께 예를 들어이 작업을 수행 자갈길 빠른 조각에서 일부 코드를 당겼다. 또한 내가 jQuery를 사용하고 여기에서 강조하고 있습니다.

    나는 (시작하고 콜백 함수의 컨테이너 끝 scroll.chain 두 개의 배열을 포함하는 객체 인 것을 주) 내가 함께 예를 들어이 작업을 수행 자갈길 빠른 조각에서 일부 코드를 당겼다. 또한 내가 jQuery를 사용하고 여기에서 강조하고 있습니다.

    $('body').on('scroll', scrollCall);
scrollBind('end', callbackFunction);
scrollBind('start', callbackFunction);

var scrollCall = function(e) {
    if (scroll.last === false || (Date.now() - scroll.last) <= 500) {
        scroll.last = Date.now();
        if (scroll.timeout !== false) {
            window.clearTimeout(scroll.timeout);
        } else {
            _(scroll.chain.start).each(function(f){
                f.call(window, {type: 'start'}, e.event);
            });
        }
        scroll.timeout = window.setTimeout(self.scrollCall, 550, {callback: true, event: e});
        return;
    }
    if (e.callback !== undefined) {
        _(scroll.chain.end).each(function(f){
            f.call(window, {type: 'end'}, e.event);
        });
        scroll.last = false;
        scroll.timeout = false;
    }
};

var scrollBind = function(type, func) {
    type = type.toLowerCase();
    if (_(scroll.chain).has(type)) {
        if (_(scroll.chain[type]).indexOf(func) === -1) {
            scroll.chain[type].push(func);
            return true;
        }
        return false;
    }
    return false;
}

    9. from https://stackoverflow.com/questions/3701311/event-when-user-stops-scrolling by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 부모 자식 상대적으로 요소의 인덱스를 가져옵니다  (0) 2020.10.15
[JQUERY] jQuery를이되지 않는 동기 XMLHttpRequest의가  (0) 2020.10.14
[JQUERY] 어떻게 온라인 / 오프라인 이벤트 크로스 브라우저를 감지?  (0) 2020.10.14
[JQUERY] jQuery를 날짜 선택기 - 비활성화 지난 날짜  (0) 2020.10.14
[JQUERY] 어떤 선택 나는 그것의 텍스트 별 옵션을 선택해야합니까?  (0) 2020.10.14
,

티스토리툴바