javascript - jq怎麼做局部div滾動？

Question

<style>
.top , .bottom{height:130px;background:#000;} .center{height:400px;overflow:hidden;position:relative;}
.center .box{ width:100%;height:100%;position:absolute;}
.center .box ul{overflow:hidden;}
.center .box ul li{background:red;height:400px;width:100 %;}
</style>

<p class="top"></p>

<p class="center">
    <p class="box">
        <ul>
        <li></li>
        <li></li>
        </ul>
    </p>
</p>

<p class="bottom"></p>

jq怎麼做ul li的局部滾動，中間這塊不能出現滾動條。也要考慮阻止瀏覽器滾動條事件。
需求是：用滑鼠滑輪滾動。 li會下滾或上滾。前提是我這個滑鼠在這裡center範圍，在範圍外面可以使用瀏覽器的滾動事件，裡面的禁止。

Answer 1

用這個scroll事件來控制box的position .

Answer 2

透過scroll事件來取得滾動的方向，透過你自己的程式計算來調整p的position，css3可以用transform，不支援css3用left,top

Answer 3

外層包裹一個p，設定overflow:hidden，剛好覆蓋住內層的捲軸。
滑鼠滾動事件。 $('.center').on（）回應滑鼠事件，然後阻止冒泡即可。