Question

这是我面对jquery的一些问题。请参阅下面给出的链接 JSfiddle

下面
的 First Column:

1。）当用户向下滚动第一列时，向上滚动第二列，向下滚动第三列，这是完美的（工作正常）

2）当用户向上滚动时，第二列下降，第三列出现（工作正常）

Issue 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

将此代码放入您的脚本

EDIT ::

 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

中的代码

＆＃13;

 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);
});

＆＃13;

#column_01 {
   background: none repeat scroll 0 0 #eeeeee;
    clear: none;
    float: left;
    margin: 0;
    overflow: auto;
    padding: 2%;
    width: 29%;
    overflow-x:hidden;
	}
#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;
}

＆＃13;

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

＆＃13;

如何滚动所有列

2 个答案: