So what I want to know is how can I scroll the page down smoothly as I resize a div past the bottom of the browser.

So far what I have set up is that when you resize the div and it gets to the last 30px of of the browser, it starts to scroll the page down. That part works, but it's jerky when doing so.

My code:

// $maxHeight is set above this, it just takes all the elements within the div and and get's the total height and set that as maxHeight $('.notifications-drop-down').resizable({ maxHeight: $maxHeight, minHeight: 400, handles: { 's': '.ui-resizable-s' }, resize: function(event, ui){ if((ui.position.top + ui.size.height) > ($(window).scrollTop() + $(window).height() - 30)){ $(window).scrollTop($(window).scrollTop()+10); } } });

What I tried to fix this: Adding an animate function to the scrollTop to make it smoother

$('html,body').animate({scrollTop: $(window).scrollTop()+30}, 200);

But that does not work smoothly. I have changed the animation duration and it's still not smooth. Does anyone know what I can do it get this to be smooth?

Something I noticed was that when the page scrolls down it does not recognize that the div is in the bottom 30px so it's not recalculating if it should scroll down more (you need to wiggle your cursor while resizing the div for it to work), I did try and add the same code for scrolling down to the resizable's stop function but that didn't help as well.

Thanks for the time.