Прокрутка содержимого в блоке по мыши над

Question

У меня есть эта навигация, которая может расширяться, когда пользователь нажимает стрелку вниз. Эти навигационные файлы хранятся в контейнере с скрытым переполнением. То, что я пытаюсь достичь, - это когда пользовательская мышь находится в верхних 20% окна, которое она прокручивает, а когда ее в нижней части 20% прокручивается вниз. Я пробовал различные плагины и сам пытался кодировать его, но пока не повезло!

Это должно быть отзывчивым, поэтому я работаю в процентах.

HTML SET UP:

<div class="container"> 
    <div class="title">Where to next? <span>(this title will be fixed)</span></div> 
    <ul class="pagesNav"> 
     <li><a href="#">Page1</a></li> 
     <li class="has_children"> 
      <a href="#">Page2</a> 
      <ul class="children"> 
       <li><a href="#">Child1</a></li> 
       <li><a href="#">Child2</a></li> 
       <li><a href="#">Child3</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Page3</a></li> 
     <li><a href="#">Page4</a></li> 
     <li><a href="#">Page5</a></li> 
     <li><a href="#">Page6</a></li> 
    </ul> 
</div> 

Посмотрите на мою скрипку:

http://jsfiddle.net/7d8fA/

Answer 1

Вы можете получить желаемый эффект, это:

var height=$('.container').height(); 
var top20=(height/100)*20; 
var top80=height-top20; 
$('.container').mouseover(function(e) { 
    e.stopPropagation(); 
    if ((e.clientY-e.currentTarget.offsetTop)<top20) { 
     $(".container").animate({ 
      scrollTop: 0 
     }, 10); 
    } else if (e.clientY>top80) { 
     $(".container").animate({ 
      scrollTop: height 
     }, 10); 
    } 
}); 

раздвоенный скрипка ->http://jsfiddle.net/U5Uk8/