jQuery, чтобы предотвратить прокрутку мимо определенной точки сверху и снизу

Question

У меня есть всплывающее средство просмотра медиа, которое запускается, когда пользователь нажимает на уменьшенное изображение. Новый зритель укладывается на фоновый экран и отображает изображение и комментарии пользователей под ним. Если пользователь нажимает на изображение, скажем, наполовину вниз по странице, в этом месте отображается «всплывающее» средство просмотра. Скажем, 2000px сверху. В этот момент пользователь может прокручивать вниз, чтобы увидеть комментарии к изображениям, но если они прокручиваются слишком далеко или прокручиваются вверх, они видят галерею подкладок. Используя jQuery, есть ли способ предотвратить прокрутку пользователя за пределы всплывающего окна или прокрутку ниже конца всплывающего окна.

Итак, скажем, всплывающее окно начинается с 2000px сверху, а всплывающее окно имеет высоту 3500 пикселей, пользователь сможет прокручивать этот 3500px div, начиная с 2000px сверху. Они не могли прокручиваться над или под ним, пока всплывающее окно не будет закрыто. Я надеюсь, что в этом есть смысл. Любая помощь приветствуется.

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

Надеюсь, это поможет!