Question

我有一个弹出式媒体查看器，当用户点击缩略图图像时会触发该浏览器。新的查看器放在背景屏幕上，并在其下方显示图像和用户注释。如果用户点击页面中间的图像，则会在该点显示“弹出”查看器。说，从顶部2000px。此时，用户可以向下滚动以查看图像注释，但如果它们滚动太远或向上滚动，则会看到底层图像库。使用jQuery，是否有一种方法可以防止用户向上滚动弹出窗口，或者在弹出窗口的末尾滚动。

所以，说弹出窗口从顶部开始是2000px，弹出窗口是3500px高，用户只能从顶部以2000px开始滚动3500px div。在弹出查看器关闭之前，它们无法在其上方或下方滚动。我希望这是有道理的。任何帮助将不胜感激。

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));
        }
    });
});

希望这有帮助！

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

2 个答案: