如何滾動瀏覽所有列

Question

以下是我正在面對的jquery問題。 見下文 JSfiddle

這裏
First Column:

1）當用戶向下滾動首列，它最多第二列和向下第三列，是完美的鏈接給出的（工作正常）

2）當用戶向上滾動，然後第二列下來，第三列上來（工作正常）

Issue is that i want the same thing for second and third column then it stuckIssue is that i want the same thing for second and third column then it stuck

Second column:

1）由於用戶向下滾動，則第一塔向上和第三列向上滾動。

2.）如果用戶向上滾動，則第一列向下滾動，第三列向下滾動。

Third column:

1）由於用戶向下滾動，則第一塔向下滾動和第二列向上滾動。

2）當用戶滾動起來，然後將第一塔向上滾動，第二列向下滾動

請建議我我如何能做到這一點任何想法

我是非常感激你

Answer 1

把這個代碼放到你的腳本

編輯::

var scrollColumn1 = true; 
var scrollColumn2 = false; 
var scrollColumn3 = false; 

    jQuery("#column_01").on("scroll", function() { 

     if(scrollColumn1) { 

      scrollColumn2 = false; 
      scrollColumn3 = false; 
      var scrolledleft = parseInt(jQuery("#column_01").scrollTop()) * -1; 

var scrolledleft1= parseInt(jQuery("#column_01").scrollTop()) * 1; 
    jQuery("#column_03").scrollTop(scrolledleft1 + scrolledright); 

    jQuery("#column_02").scrollTop(scrolledleft + scrolledcenter); 
     } else 
      scrollColumn1 = true; 
    }); 

    jQuery("#column_02").scrollTop(jQuery("#column_02 .right_container").height()); 


var scrolledright = parseInt(jQuery("#column_03").scrollTop()); 

var scrolledcenter = parseInt(jQuery("#column_02").scrollTop()); 


    jQuery("#column_02").on("scroll", function() { 

     if(scrollColumn2) { 

      scrollColumn1 = false; 
      scrollColumn3 = false; 
      var scrolledleft = parseInt(jQuery("#column_02").scrollTop()) * 1; 

     var scrolledleft1= parseInt(jQuery("#column_02").scrollTop()) * 1; 

      jQuery("#column_03").scrollTop(scrolledleft1 + scrolledright1); 

      jQuery("#column_01").scrollTop(scrolledleft + scrolledcenter1); 
     } else 
      scrollColumn2 = true; 
    }); 

    var scrolledright1 = parseInt(jQuery("#column_01").scrollTop()); 

    var scrolledcenter1 = parseInt(jQuery("#column_03").scrollTop()); 

    jQuery("#column_03").on("scroll", function() { 


     if(scrollColumn3) { 
      scrollColumn2 = false; 
      scrollColumn1 = false; 
      var scrolledleft = parseInt(jQuery("#column_03").scrollTop()) * -1; 

     var scrolledleft1= parseInt(jQuery("#column_03").scrollTop()) * 1; 
      jQuery("#column_01").scrollTop(scrolledleft1 + scrolledcenter2); 

      jQuery("#column_02").scrollTop(scrolledleft + scrolledright2); 
     } else 
      scrollColumn3 = true; 
    }); 


    jQuery("#column_01").scrollTop(jQuery("#column_01 .right_container").height()); 

    var scrolledright2 = parseInt(jQuery("#column_02").scrollTop()); 

    var scrolledcenter2 = parseInt(jQuery("#column_01").scrollTop()); 

Answer 2

試試這個我的代碼或請訪問我的代碼JSFiddle

heightC1 = $('#column_01')[0].scrollHeight; 
 
    heightC2 = $('#column_02')[0].scrollHeight; 
 
    heightC3 = $('#column_03')[0].scrollHeight; 
 

 
    $("#column_01").scrollTop(heightC1); 
 
    heightC1 = $("#column_01").scrollTop(); 
 
    $("#column_01").scrollTop(0); 
 

 
    $("#column_02").scrollTop(heightC2); 
 
    heightC2 = $("#column_02").scrollTop(); 
 
    $("#column_02").scrollTop(0); 
 

 
    $("#column_03").scrollTop(heightC3); 
 
    heightC3 = $("#column_03").scrollTop(); 
 
    $("#column_03").scrollTop(0); 
 

 
$("#column_01").on("scroll", function() { 
 
    var scrollVal = $("#column_01").scrollTop(); 
 
     console.log("Value scroll: "+scrollVal); 
 
    var percentage = 100 * scrollVal/heightC1; 
 
     console.log("Percentage: "+percentage); 
 
    var diff2 = heightC2 - (heightC2 * percentage/ 100) ; 
 
     console.log("Diff2: "+diff2); 
 
    var valScroll = heightC2-diff2; 
 
     console.log("Valscroll: "+valScroll); 
 
    $("#column_02").scrollTop(valScroll); 
 
    var diff3 = heightC3 - (heightC3 * percentage/ 100) ; 
 
     console.log("Diff3: "+diff3); 
 
    var valScroll2 = heightC3-diff3; 
 
    console.log("Valscroll: "+valScroll2); 
 
    $("#column_03").scrollTop(valScroll2); 
 
});

#column_01 { 
 
    background: none repeat scroll 0 0 #eeeeee; 
 
    clear: none; 
 
    float: left; 
 
    margin: 0; 
 
    overflow: auto; 
 
    padding: 2%; 
 
    width: 29%; 
 
    overflow-x:hidden; 
 
\t } 
 
#column_02 { 
 
    background: none repeat scroll 0 0 #eeeeee; 
 
    clear: none; 
 
    float: left; 
 
    margin: 0 0.5%; 
 
    overflow: auto; 
 
    padding: 2%; 
 
    width: 29%; 
 
    overflow-x:hidden; 
 
    
 
} 
 
#column_03 { 
 
    width: 30%; 
 
    float:left; 
 
    top:0; 
 
    bottom: 0; 
 
    right: 0; 
 
    position: fixed; 
 
    overflow:auto; 
 
overflow-x:hidden; 
 
} 
 
#column_01, #column_02, #column_03{ 
 
    height:300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="column_01"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitationullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidat dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidat non proident, sunt in culpa dolore eu fugiat nulla pariatur. Excepteur s dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incid qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incid magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
 
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidat dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidat non proident, sunt in culpa dolore eu fugiat nulla pariatur. Excepteur s dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incid qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incid magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div> 
 
    <div id="column_02"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitationullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidat dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidat non proident, sunt in culpa dolore eu fugiat nulla pariatur. Excepteur s dolore eu fugiat nulla pariatur. Excepteur sint occ</div> 
 

 
<div id="column_03"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitationullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptat</div>