jQuery悬停滚动很长的菜单

时间:2015-09-30 14:36:49

标签: jquery scroll menu

这基于Chris Coyier的片段: https://css-tricks.com/long-dropdowns-solution/

我正在研究一个长下拉式解决方案,我想消除底部的额外空间,也许可以让它更容易点击靠近鼠标的项目。将鼠标悬停在菜单上以滚动它。

这是小提琴https://jsfiddle.net/3hanq4wt/1/

额外的空间是由我的JS向上移动UL引起的。它需要一个改进的运动比率,以便在滚动时UL不会移动得那么高。

我尝试了几件事,例如:

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

我确实认识到这对于大多数情况来说不是理想的用户体验解决方案,但我的布局需要固定高度(动态分配)容器,并且隐藏了溢出。

谢谢:)

2 个答案:

答案 0 :(得分:0)

通过在偏移处添加一些像素,我能够摆脱小提琴中的额外空间。

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

或使用listheight变量

listheight = list.outerHeight() - 200,

答案 1 :(得分:0)

由于这花了我很长时间,我会发布解决方案:

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

更改乘数,使其使用您想要移动的实际距离除以“轨道”中的光标像素数。

小提琴:https://jsfiddle.net/3hanq4wt/3/