After reviewing other questions, it's important to note that the scroll I am looking for is horizontal, not vertical. My goal is to have a div on a page automatically start scrolling when it reaches the center or becomes visible, and then allow the page to continue scrolling once the div has finished.
I currently have a "slider" set up like this: JSFIDDLE
While I can determine when the element becomes visible on the page after scrolling, I'm unsure of how to disable vertical scrolling, enable scrolling specifically for the div, and then resume page scrolling seamlessly. It's crucial that the div continues to scroll proportionally as I navigate using the mouse, keyboard, or touch input.
function testInView($el){
var wTop = $(window).scrollTop();
var wBot = wTop + $(window).height();
var eTop = $el.offset().top;
var eBot = eTop + $el.height()+50;
return ((eBot <= wBot) && (eTop >= wTop));
}
function setInView(){
$(".slider-wrapper").each(function(){
var $zis = $(this);
$zis.removeClass("inview");
if(testInView($zis)){
alert("Here it is");
}
});
}
$(document).scroll(function(){
setInView();
});
$(document).resize(function(){
setInView();
});
$(document).ready(function(){
setInView();
});