머리말
일반적으로 내부 스크롤 막대가 양쪽 끝으로 스크롤되면 외부 스크롤 막대도 함께 스크롤되지만 때로는 사용자가 현재 영역만 스크롤할 수 있기를 바랍니다. 바(창)는 트리거되지 않습니다. 현재 영역을 떠난 후에만 외부 스크롤 바를 스크롤할 수 있습니다. 사용자가 실수로 너무 멀리 스크롤하여 현재 영역이 표시 영역을 벗어날 수 있기 때문입니다.
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滚动条的高度
$('#main').hover(function(){
scrollTop = $(window).scrollTop();
}, function(){
scrollTop = -1;
});
// 鼠标进入到区域后，则强制window滚动条的高度
$(window).scroll(function(){
scrollTop!==-1 && $(this).scrollTop(scrollTop);
})
})위 코드에서 볼 수 있듯이 창 스크롤바 이벤트를 방지하지 않고 사용자가 스크롤할 때마다 값을 다시 할당했습니다.
요약
이 글의 내용이 모두의 공부나 업무에 조금이나마 도움이 되었으면 좋겠습니다. 물론 더 좋은 방법도 있을 수 있겠지만요. 제공해주시면 감사하겠습니다!
jquery를 사용하여 외부 스크롤 막대의 스크롤을 비활성화하는 것과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
