使用 jQuery 滚动和捕捉到内部元素答案

【问题标题】：Scrolling and snapping to inner elements using jQuery使用 jQuery 滚动和捕捉到内部元素
【发布时间】：2014-09-13 18:09:38
【问题描述】：

我有一个包含 3 个部分的页面，例如顶部、中间和底部。

每个部分的高度都是固定的。让我们说在这种情况下 600px;

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

我的问题是：

如何实现一个 jQuery 解决方案来提供以下场景。

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

你能提供一个解决方案吗？

提前致谢

【问题讨论】：

不能用原生滚动条来做。应该可以为它找到一个滚动条插件

标签： javascript jquery scroll vertical-scrolling

【解决方案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;
    }
});

【讨论】：

是的，这就是解决方案的思路。你说的不完全是什么意思？我会尝试采用一个实现并回复你 :) 谢谢！
不客气，我更新了答案，再次检查，我修复了来回问题（即，如果用户向下滚动然后向上再向下滚动）。