javascript - How to do local div scrolling in jq?

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>

How does jq do partial scrolling of ul li? No scroll bar can appear in the middle. Also consider blocking browser scrollbar events.
The requirement is: scroll with the mouse wheel. li will scroll down or up. The premise is that my mouse is in the center range here. The browser's scroll event can be used outside the range, but it is prohibited inside.

Answer 1

Use this scroll event to control the position of the box.

Answer 2

Get the scrolling direction through the scroll event, and adjust the position of p through your own program calculation. You can use transform for css3. If css3 is not supported, use left and top.

Answer 3

Wrap a p in the outer layer and set overflow:hidden to just cover the inner scroll bar.
Mouse scroll event. $('.center').on() responds to mouse events and then prevents bubbling.