jQuery hover scroll for very long menus

November 21, 2016, at 9:39 PM

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 :)

Answer 1

I was able to get rid of the extra space in your fiddle by adding some pixels to your offset.

containerTop = container.offset().top + 50,

or using your listheight variable

listheight = list.outerHeight() - 200,
Answer 2

Since this took me quite a while, I'll post solution:

multiplier= ( listheight-container.outerHeight() ) / container.outerHeight();

Change the multiplier so it uses the actual distance you want to move, divided by the number of cursor pixels in the 'track'.

Fiddle: https://jsfiddle.net/3hanq4wt/3/

Rent Charter Buses Company
How to set fixed table width(not cell) in table sorter?

How to set fixed table width(not cell) in table sorter?

I use table sorter. According the table content different pages(pagination) can have different width.

How can I load URL content in main window

How can I load URL content in main window

I am using below code to load some content in iFrame. .

Wcf from JQuery

Wcf from JQuery

I'm trying to invoke wcf service from Jquery Ajax. The service is usual Hello:.

autocomplete.js exclude words from triggering search

autocomplete.js exclude words from triggering search

I'm using http://autocompletejs. com/ and my client is asking if certain words can be excluded, or as they say, "treated as neutral", and not trigger the autocomplete box from displaying.