Question

我希望能够滚动我的页面，当我达到某一点时，我想要一个div水平滚动但我似乎无法实现这一点..我有一些jquery当用户点击第二个时发出警报部分，但我无法让它工作，我现在只是在我的块上有一个动画，但它根本没有工作......你能帮我吗？

http://jsfiddle.net/AXsMR/

Answer 1

这是你想要实现的目标吗？

http://jsfiddle.net/Mu4ug/3/

当用户向下滚动到第二个div时，动画开始。

Answer 2

首先，我不会使用节标签，我会使用DIVS。另外，我将所有“部分”（div）放在具有指定宽度的主div中（以防止垂直堆叠）

然后在滚动时，我将使用jQuery offset（）。left方法获取要滚动的部分的位置（或）为偶数滚动设置预定义值，然后调用animate函数。 / p>

<div style='width: 4000px' id='masterDiv'>
      <div id='section1' class='innerDiv' style='width: 1000px'></div>
      <div id='section2' class='innerDiv' style='width: 1000px'></div>
      <div id='section3' class='innerDiv' style='width: 1000px'></div>
      <div id='section4' class='innerDiv' style='width: 1000px'></div>
</div>

您可以在此处确定滚动的方向＆gt; How can I determine the direction of a jQuery scroll event?（向下滑动向右移动屏幕，向上滑动向左移动屏幕）

然后使用类似的东西..

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       $("#masterDiv").animate({ "left": "+=180px" }, 1000);
   } else {
      $("#masterDiv").animate({ "right": "+=180px" }, 1000);
   }
   lastScrollTop = st;
});

需要一些测试，但应该有所帮助。

Answer 3

您也可以使用此功能....

function moveToTargetDiv(target, outer){
    var out = $(outer);
    var tar = $(target);
    var x = out.width();
    var y = tar.outerWidth(true);
    var z = tar.index();
    var q = 0;
    var m = out.find('li');

    for(var i = 0; i < z; i++){
        q+= $(m[i]).outerWidth(true)+4;
    }

    $('#tabUl').animate({
    scrollLeft: Math.max(0, q )
    }, 800);
    return false;
}

例如：https://jsfiddle.net/dinesh10641/mvqxbjvs/

Jquery滚动到目标div水平移动

3 个答案: