javascript - 使用 jQuery 滚动并捕捉到内部元素

Question

我有一个页面涉及 3 个部分，例如顶部、中间和底部。

每个部分都有固定的高度。假设在本例中为 600px；

在中间部分，我有一些内容超出了规定的 600 像素高度。例如1200 像素的内容。创建溢出，中间部分的内部滚动条。

我的问题是:

如何实现将提供以下场景的 jQuery 解决方案。

用户向下滚动经过顶部部分到中间部分，主滚动然后捕捉/切换到中间 - 内部内容，溢出高度为 1200px。一旦他们向下滚动到内容的末尾，他们就会离开中间部分，并且滚动会捕捉/切换回末尾部分。

你能提供解决方案吗？

提前致谢

Answer 1

更新:

这可能不完全是您想要的工作方式，但它以某种方式满足您的需要: DEMO

var passed=false;
$(document).scroll(function(){
    if($('body').scrollTop()>=$('#middle').offset().top && !passed){
        $('body').css('overflow','hidden');
        $('#container').css('overflow','auto');
        $('#container').attr("tabindex",-1).focus();
        $('#container').scrollTop(0);
    }
    else if($('body').scrollTop()<$('#middle').offset().top){
        passed=false;
    }
});
$('#container').scroll(function(){
    if($(this).scrollTop()+$(this).height()>=$('#long').height()){
        $(this).css('overflow','hidden');
        $('body').css('overflow','auto');
        passed=true;
    }
});