javascript - jq에서 로컬 div 스크롤을 수행하는 방법은 무엇입니까?

Question

<style>
.top , .bottom{높이:130px;배경:#000;} .center{height:400px;overflow:hidden;position:relative;}
.center .box{너비:100%;높이 :100%;위치:절대;}
.center .box ul{overflow:hidden;}
.center .box li{배경:red;height:400px;width:100%;}
</style>

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

으아악

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

jq는 어떻게 ul li의 부분 스크롤을 수행합니까? 중간에 스크롤 막대가 나타날 수 없습니다. 또한 브라우저 스크롤바 이벤트를 차단하는 것도 고려해 보세요.
요구 사항은 마우스 휠로 스크롤하는 것입니다. li는 아래 또는 위로 스크롤됩니다. 여기서는 내 마우스가 중앙 범위에 있다는 전제가 있습니다. 브라우저의 스크롤 이벤트는 범위 밖에서는 사용할 수 있지만 내부에서는 금지됩니다.

Answer 1

이 스크롤 이벤트를 사용하여 상자 위치를 제어하세요.

Answer 2

스크롤 이벤트를 통해 스크롤 방향을 얻고, 자체 프로그램 계산을 통해 p의 위치를 ​​조정하세요. CSS3가 지원되지 않으면 왼쪽과 위쪽을 사용하세요.

Answer 3

외부 레이어에 p를 감싸고 내부 스크롤 막대만 덮도록 Overflow:hidden을 설정합니다.
마우스 스크롤 이벤트. $('.center').on()은 마우스 이벤트에 응답한 다음 버블링을 방지합니다.