jQuery的滾動目標DIV水平移動

Question

我希望能夠滾動我的網頁，當我打的某一點我想一個div跨越水平滾動，但我似乎無法實現this..I有一些jQuery的這驚動當用戶打第二部分，但我無法得到它的工作，我現在只是有我的塊上有生命的，但它不工作...你能幫助我嗎？

所有的

http://jsfiddle.net/AXsMR/

Answer 1

這是你想達到什麼樣的？

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

當用戶向下滾動到第二個div，動畫開始。

Answer 2

首先，我不會用部分的標籤，我會使用DIVS。此外，我會把所有我的「部分」（divs）在指定寬度的主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; 
}); 

需要一些測試，但應該有所幫助。

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/