jQuery hover scroll for very long menus

This is loosely based on Chris Coyier's snippet: https://css-tricks.com/long-dropdowns-solution/

I'm working on a long-dropdown solution, and I would like to eliminate the extra space at the bottom, and perhaps make it a little easier to click items close to mouse. Hover over the menu to scroll it.

Here's the Fiddle: https://jsfiddle.net/3hanq4wt/1/

The extra space is caused by my JS moving the UL upwards. It will need an improved movement ratio so that so that the UL doesn't move quite so high when scrolling.

I tried several things, such as:

     var remainder = containerBottom - ( list.offset().top + listheight ); 
     //this remainder ought to be useful somehow.  Surely it must.

I do realize that this is not an ideal UX solution for most cases, but I have a layout that requires fixed height (assigned dynamically) container with overflow hidden.

Thanks :)