jQuery以防止在顶部和底部的某个点滚动

Question

我有一个弹出式媒体查看器，当用户点击缩略图时会触发它。新的查看器被放置在背景屏幕上，并在其下面显示图像和用户注释。如果用户单击一个图像，比如在页面的一半处，“弹出”查看器将在该位置显示。比方说，从顶部到2000便士。此时，用户可以向下滚动以查看图像注释，但是如果他们滚动得太远，或者向上滚动，他们就会看到底层图片库。使用jQuery，是否有一种方法可以防止用户在弹出后向上滚动，或者在弹出结束后滚动。

因此，假设弹出从顶部的2000 at开始，而弹出值高达3500 at，用户将只能从顶部滚动从2000 at开始的3500 pop。在弹出查看器关闭之前，它们不能在上面或下面滚动。我希望这是有意义的。任何帮助都将不胜感激。

Answer 1

这是一个如何限制2点之间滚动的示例。

http://jsfiddle.net/n7BSs/

$(document).ready(function(){
    var eTop = $("#test").offset().top;
    $(document).scrollTop(eTop);
    var eHeight = $("#test").height();
    var eBottom = eTop + eHeight - $(window).height();
    $(document).on("scroll", function(e){
        var windowScrollTop = $(window).scrollTop();
        if(windowScrollTop < eTop){
            console.log("not allowed");
            $(document).scrollTop(eTop);
        }
        else if(windowScrollTop > eBottom){
            $(document).scrollTop(eBottom);
        }
        else{
            console.log("allowed");
        }
    });
});

Answer 2

我对代码做了一些改进，以避免闪烁，以防要保存在视图端口中的对象比窗口小：

https://jsfiddle.net/SebastienFauvel/zex8mjr2/

$(function () {
    var scrollMin = function (selector) {
        var scrollY;
        scrollY = $(selector).offset().top;
        scrollY = Math.max(scrollY, 0);
        return scrollY;
    };
    var scrollMax = function (selector) {
        var scrollY;
        scrollY = $(selector).offset().top + $(selector).height() - $(window).height();
        scrollY = Math.min(scrollY, $(document).height() - $(window).height());
        scrollY = Math.max(scrollY, scrollMin(selector));
        return scrollY;
    };
    var selector = "#test";
    $(document).scrollTop(scrollMin(selector));
    $(document).on("scroll", function (e) {
        var windowScrollTop = $(window).scrollTop();
        if (windowScrollTop < scrollMin(selector)) {
            console.log("hit top");
            $(document).scrollTop(scrollMin(selector));
        } else if (windowScrollTop > scrollMax(selector)) {
            console.log("hit bottom");
            $(document).scrollTop(scrollMax(selector));
        }
    });
});

希望这能有所帮助！