Check if the item is fully visible, and then stop scrolling

Question

I use FullSlider.js to create a full slide page. If the red element is fully visible, I need the browser to block the scroll event (means: the window does not move, but I can get the action), and then after I have done some things that I want to enable scrolling again.

This is what I have done so far:

I read a lot about this and tried even more solutions, such as: stop scrolling: 1. stop scrolling a web page using jquery does not work at all

2. How to programmatically disable page scrolling using jQuery stops scrolling, but it is not possible to enable scrolling again

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

check if element exists:

Check if the item is visible after scrolling

I used the solution above and tried:

• to check if the red element is visible (not working)
• checked if a tiny span above the red element is displayed (does not work)
• checked if a tiny range is displayed under the red element (doesn't work)

• checked if a tiny span is displayed above and below the element (doesn't work at all)

• tried some idea on how to get scrollTop from a red element and check if broll is equal to scrollTop or next to it

In fact, solution 2 worked really well, but I just couldn't find the offset that I needed to compensate for “fixed-heading navigation”.

I am currently using "isScrolledIntoView" to determine if a position is suitable (works well on large screens, generally does not work on small screens). To scroll the stop, I use 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)); } 

Has anyone come across a familiar situation and have some scripts or hacks to help me?

Answer 1

Sorry, I still can not answer in the comments. So this is only a partial answer regarding the second part of your question.

To check if your item is fully:

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

• Checking a tiny span over a red element is not required. Would it not be equal to just checking if the top of the red element is on the screen? You can do it like this:

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

  But this is only a check to see if the top of your item is visible!

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

Maybe this helps a bit. Also, it would be very helpful to see a sample page or jsfiddle example.