CODEWITHSUNDEEP
jqueryscroll
Chris
Chris

Reputation: 889

jQuery to prevent scrolling past certain point at top and bottom

I have a pop up media viewer that is trigged when a user clicks on a thumbnail image. The new viewer is laid over the background screen and displays the image and user comments below it. If the user clicks an image say half way down the page, the "pop up" viewer is displayed at that point. Say, 2000px from the top. At that point the user can scroll down to see the image comments, but if they scroll too far, or scroll up, they see the underlaying image gallery. Using jQuery, is there a way to prevent the user from being able to scroll up beyond the pop up, or scroll below the end of the pop up.

So, say the pop up starts at 2000px from the top, and the pop up is 3500px high, the user would only be able to scroll that 3500px div starting at 2000px from the top. They couldn't scroll above or below it until the pop up viewer is closed. I hope that makes sense. Any help would be much appreciated.

Upvotes: 4

Views: 9686

Answers (2)

Sébastien Fauvel
Sébastien Fauvel

Reputation: 499

I've improved the code a bit to avoid flickering in case the object to keep in the viewport is smaller than the window:

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

Hope this helps!

Upvotes: 0

Sam Battat
Sam Battat

Reputation: 5745

This is a sample of how you can limit the scrolling between 2 points

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

Upvotes: 5

Related Questions