scrollTop div, когда пользователь начинает прокрутку, а затем позволяет пользователям свободно прокручивать

Question

У меня есть 2 divs на веб-странице. Первый div - #pattern, а другой div - #top.

Когда пользователь приходит на мою веб-страницу, два divs являются видимыми. , как только пользователь начнет прокрутку, я хочу, чтобы div «#top» прокручивался доверху. Мне удалось достичь этого, но как только это будет сделано, я хочу, чтобы пользователь был неспособен начать прокрутку снова, я просто хочу, чтобы анимация scrollto появлялась один раз, когда пользователь впервые прокручивается.

Я использую плагин jquery.scrollTo.

Я попытался использовать флаг, но это не работает ...

Вот мой HTML:

<div id="pattern"> 
</div> 

<div id="top"> 
</div> 

Мой CSS:

#pattern { 
    height: 600px; 
    width:100%; 
    background-color:blue 
} 

#top { 
    height: 600px; 
    width:100%; 
    background-color:red; 
} 

и мой Jquery:

$(window).on('scroll',function(){  
    var flag=0 ; 

    if((flag==0) && $(window).scrollTop()>10){ 
     $(window).scrollTo('#top', 800); 
     flag=1; 
    }  
}); 

Это JSfiddle: http://jsfiddle.net/w8mgnmfe/

Answer 1

Просто включите событие off, когда вы делаете скроллинг:

$(window).on('scroll.mynamespace',function(){ 

    if($(window).scrollTop() > 10) { 
     $(window).off('scroll.mynamespace'); 
     $('html,body').animate({scrollTop: $('#top').offset().top}); 
    } 

}); 

Примечание: Я обновил его использовать не плагины. Также измените значение mynamespace на нечто более значимое, например scrollToDiv или что-то для вас. Это гарантирует, что вы отключите это событие.

Если вы хотите, чтобы активировать его:

var autoScrolled = false; 
var scrollBoundary = 10; 

$(window).on('scroll.mynamespace',function() { 

    var windowTop = $(window).scrollTop(); 

    if (!autoScrolled && windowTop > scrollBoundary) { 
     autoScrolled = true; 
     $('html,body').animate({scrollTop: $('#top').offset().top}); 
    } else if(autoScrolled && windowTop <= scrollBoundary) { 
     autoScrolled = false; 
    } 

}); 

Fiddle: http://jsfiddle.net/ferahl/b5ybs6xg/1/

Answer 2

мне удалось найти решение, поставив флаг вне моего события прокрутки ...

здесь полный код:

var flag=0 ; 

$(window).on('scroll',function(){  


    if((flag==0) && $(window).scrollTop()>10){ 
     $(window).scrollTo('#top', 800); 
     flag=1; 
    }  

     if($(window).scrollTop()==0){ 
     flag=0; 
    } 
});