javascript - jqでローカルdivスクロールを行うにはどうすればよいですか?

Question

<style>
.top , .bottom{height:130px;background:#000;} .center{height:400px;overflow:hidden;position:relative;}
.center .box{幅:100%;高さ:100%;位置:絶対;}
.center .box ul{overflow:hidden;}
.center .box ul li{background:red;height:400px;width:100 %;}
</style>

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

リーリー

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

jq はどのようにして ul li の部分スクロールを実行しますか? 中央にスクロール バーを表示することはできません。ブラウザーのスクロールバー イベントをブロックすることも検討してください。
要件は、マウス ホイールでスクロールすることです。 li は下または上にスクロールします。ここではマウスが中央の範囲にあることが前提で、範囲外ではブラウザのスクロールイベントを使用できますが、範囲内では使用禁止です。

Answer 1

このスクロール イベントを使用して、ボックスの位置を制御します。

Answer 2

スクロールイベントを通じてスクロール方向を取得し、独自のプログラム計算を通じてpの位置を調整します。css3がサポートされていない場合は、leftとtopを使用します。

Answer 3

外側のレイヤーで p をラップし、内側のスクロール バーだけを覆うように overflow:hidden を設定します。
マウススクロールイベント。 $('.center').on() はマウス イベントに応答し、バブリングを防ぎます。