Check whether an element is fully visible and then stop scrolling

Question

I´m using FullSlider.js to create a full-slide-webpage. In case the red element is fully visible, I need the browser to block the scroll event (means: window is not moving, but I´m able to receive the action) and than after I did some stuff I want to enable scrolling again.

That is what I did so far:

I read a lot of stuff about this and tried even more solutions like: stop scrolling: 1. stop scrolling of webpage with jquery does not work at all

2. How to programmatically disable page scrolling with jQuery does stop the scrolling, but it is not possible to enable scrolling again

3. event prevent default, works fine in chrome, but less fine in firefox

check if element is visible:

Check if element is visible after scrolling

I used the solution above and tried:

1. to check if the red element is visible (did not work)
2. checked if a tiny span above the red element is visible (did not work well)
3. checked if a tiny span below the red element is visible (did not work well)

4. checked if a tiny span above and below the element is visible (did not work at all)

5. tried some idea about getting the scrollTop of the red element and check if the bodys scrollTop is equal or near

In fact the 2. solution did work quiet well, but I just was not able to figure out the offset I needed to at to compensate the "fixed-header navigation".

Currently I´m using the "isScrolledIntoView" to detect whether the position fits (works well on large screens, does not work at all on small screens). For the stop scrolling, I´m using the following hack:

CSS: .scrollHack { position: static; overflow: hidden; }

JS:

  $(document).on('mousewheel', function(event, delta) {
      // stopScroll and isStopped are booleans delivered by another script
      if(isScrolledIntoView($("#s3")))
      {
        isStopped = false; 
        if(delta >= 0) {
         $('#s3').get(0).contentWindow.car.next(); //  car.next();
        }
        else{
         $('#s3').get(0).contentWindow.car.previous(); 
        }    
        stopScroll = $('#s3').get(0).contentWindow.isStopped; 
      }
     if(!stopScroll && isScrolledIntoView($("#s3")))
     {
      event.preventDefault(); 
      $("body").addClass("scrollHack");
     }
     else
     {
          $("body").removeClass("scrollHack"); 
     }

});

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

Was someone faced with an familiar situation and has some scripts or hacks that would help me out?

Answer 1

Sorry, I can't answer in a comment yet. So this is only a partial answer, regarding the second part of your question.

For checking whether your element is fully in view:

• Try using jQuery innerHeight() instead of height(). This gives you the element height without margins and borders.

• Checking for a tiny span above the red element should not be necessary. Wouldn't that be equal to just checking whether the top of the red element is on the screen? You could do that like this:

  function isScrolledIntoView(elem) {        
      var docViewTop = $(window).scrollTop();
      var elemTop = $(elem).offset().top;
      return (elemTop >= docViewTop));
  }
  

  But this is only checking whether the top of your element is visible!

• You say that your current solution does not work well on small screens. Could it be that the element you are checking is taller than the viewport on small screens?

Maybe this helps a little. Else it would be really good to see an example page or a jsfiddle example.