Jquery滚动到目标div水平移动答案

【问题标题】：Jquery scroll to target div moves horizontallyJquery滚动到目标div水平移动
【发布时间】：2012-07-23 10:03:39
【问题描述】：

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

http://jsfiddle.net/AXsMR/

【问题讨论】：

你的意思是“当我点击某个点时”，还是“当我向下滚动到某个点时”？

标签： jquery scroll jquery-animate

【解决方案1】：

这是你想要达到的目标吗？

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

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

【讨论】：

是的，这很好，我将如何反转它，如果用户向上滚动，div 会恢复到原来的状态？谢谢！
这是一种方法 (jsfiddle)，但你可以让代码更简单，我只是快速完成了
谢谢，这至少让我走上了正轨！ :D 非常感谢，谢谢！！！

【解决方案2】：

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

然后在滚动时，我会使用 jQuery offset().left 方法来获取您希望滚动到的部分的位置（或）为偶数滚动设置预定义值，然后调用 animate 函数。

<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>

您可以在这里确定滚动的方向>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;
});

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

【讨论】：

【解决方案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/

【讨论】：