집 >웹 프론트엔드 >JS 튜토리얼 >jquery를 사용하여 외부 스크롤 막대의 스크롤을 비활성화합니다.

jquery를 사용하여 외부 스크롤 막대의 스크롤을 비활성화합니다.

高洛峰원래의: 2017-01-11 10:05:131732검색

머리말

일반적으로 내부 스크롤 막대가 양쪽 끝으로 스크롤되면 외부 스크롤 막대도 함께 스크롤되지만 때로는 사용자가 현재 영역만 스크롤할 수 있기를 바랍니다. 바(창)는 트리거되지 않습니다. 현재 영역을 떠난 후에만 외부 스크롤 바를 스크롤할 수 있습니다. 사용자가 실수로 너무 멀리 스크롤하여 현재 영역이 표시 영역을 벗어날 수 있기 때문입니다.

jquery에서 스크롤 이벤트는 스크롤이며, 이 이벤트는 버블링 및 기본 이벤트를 방지할 수 없습니다. 창의 스크롤 막대를 비활성화하도록 설정한 경우 내가 채택하는 전략은 다음과 같습니다. 마우스가 현재 영역에 들어갈 때 창의 스크롤 막대 높이는 항상 마우스가 들어가기 전의 높이입니다.

다음 코드:

<style type="text/css">
 .main{
 overflow: auto;
 width: 400px;
 height: 400px;
 border: 1px solid #aaa;
 }
 .main p{
 height: 800px;
 }
</style>
 
<body>
 <div id="main" class="main">
 <p></p>
 </div>
 <p style="height:1000px;"></p>
</body>
 
$(function () {
 var scrollTop = -1; // 鼠标进入到区域后，则存储当前window滚动条的高度
 $(&#39;#main&#39;).hover(function(){
 scrollTop = $(window).scrollTop();
 }, function(){
 scrollTop = -1;
 });
 
 // 鼠标进入到区域后，则强制window滚动条的高度
 $(window).scroll(function(){
 scrollTop!==-1 && $(this).scrollTop(scrollTop);
 })
})

위 코드에서 볼 수 있듯이 창 스크롤바 이벤트를 방지하지 않고 사용자가 스크롤할 때마다 값을 다시 할당했습니다.

요약

이 글의 내용이 모두의 공부나 업무에 조금이나마 도움이 되었으면 좋겠습니다. 물론 더 좋은 방법도 있을 수 있겠지만요. 제공해주시면 감사하겠습니다!

jquery를 사용하여 외부 스크롤 막대의 스크롤을 비활성화하는 것과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!

성명：

이전 기사：jQuery 앵커 점프 스크롤 막대 한 문장으로 부드러운 스크롤 코드다음 기사：jQuery 앵커 점프 스크롤 막대 한 문장으로 부드러운 스크롤 코드

jquery를 사용하여 외부 스크롤 막대의 스크롤을 비활성화합니다.

관련 기사