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

时间:2020-05-28 09:03:32

标签: javascript jquery css position autoscroll

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

实际上,我有一个像这样的“滑块”: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();
});

1 个答案:

答案 0 :(得分:0)

如果要禁用垂直滚动,则只需将overflow-y设置为:隐藏在主体元素上

body {
    overflow-y: hidden;
}