Javascript 框内容在鼠标上方滚动

我有一个导航，当用户单击下拉箭头时可以展开，这个导航保存在一个隐藏溢出的盒子容器中。我试图实现的是，当用户鼠标位于框的顶部20%时，它会向上滚动，当鼠标位于框的底部20%时，它会向下滚动。我尝试了各种各样的插件，并尝试自己编写代码，但到目前为止没有成功

这必须是响应，所以我的工作百分比

HTML设置：

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

下一步去哪里？（此标题将被固定）

看看我的小提琴：

---

您可以通过以下方式获得所需的效果：

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);
    }
});

var height=$（'.container'）.height（）；
变量top20=（高度/100）*20；
var top80=高度-top20；
$（'.container'）.mouseover（函数（e）{
e、 停止传播（）；
if（（e.clientY-e.currentTarget.offsetTop）top80）{
$（“.container”）.animate({
滚动顶部：高度
}, 10);
}
});

叉形小提琴->