水平滚动 div 而不是页面，然后滚动页面

Question

它不是重复的，因为我已经阅读了其他问题，但每个人都认为滚动是垂直的，而我需要水平滚动。 我想要做的是滚动一个放置在页面某处的 div，当它到达屏幕中心或几乎可见时，当它结束滚动时，我需要继续页面滚动。

其实我有一个这样的“滑块”：JSFIDDLE

实际上，当元素在滚动后在页面上可见时，我可以获得建议，但我不知道如何禁用垂直滚动，滚动我的 div，然后再次滚动页面。重要的是 div 滚动了多少我继续滚动（打算用鼠标、键盘和触摸，它会很棒）

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("eccolo");   
    }
});
}
$(document).scroll(function(){
    setInView();
});
$(document).resize(function(){
    setInView();
});
$(document).ready(function(){
    setInView();
});

Answer 1

如果你想禁用垂直滚动，那么只需在 body 元素上设置 overflow-y: hidden

body {
    overflow-y: hidden;
}