Page Gets Frozen After jQuery On Scroll Event Applied To a DIV

[phdphd]

Hi All,

I made some jQuery that successfully scrolls the viewport to the top border of a scrollable div when the user scrolls the contents of that div.

The issue is that after that I cannot scroll the whole page (the div itself remains scrollable). Here is what my jQuery looks like :

$("#scrollable_div").on( 'scroll', function(){
	
  //here goes some code to calculate the distance to move
  

$('html, body').animate({scrollTop: distance},'slow');

		 
});

Thanks for your help!

 

[phdphd]

I've just posted a jsfiddle about this issue

 

https://jsfiddle.net/949bm7vq/

[phdphd]

Well, I think I found a solution with clearQueue().

Any comments welcome!

 

https://jsfiddle.net/6sempeav/

[maxxd]

I believe that using animate() to scroll the page down still fires the scroll() event in the browser. If I'm correct about that, you're basically calling the function in an almost infinite loop until the page scrolls to the value of distance - which would freeze your page.