記錄JQ讓兩個div滾動條共同滑動

1.粗糙的記錄下代碼

css:

<style>
       #test_Left,
       #test_Right {
           width: 500px;
           height: 300px;
           background: red;
           overflow-x: auto;
       }

       #test_Right {
           background: blue;
       }

       .test_Left {
           width: 800px;
       }

       .test_Right {
           width: 800px;
       }
   </style>
複製代碼

html:

<div id="test_Left" onScroll="moveUp_Left();">
    <div class="test_Left"> 有多個兄弟級div,如何用jquery實現只讓當前點擊的DI...16
        2016-12-29如何讓頁面上兩個div中的滾動條（滑塊）同步運動1
        2015-04-25同一段JS代碼，修改ID後如何讓兩個DIV裏的內容都滾動呢？
        2017-01-17jquery怎麼對div不會隨着滾動條滾動而滾動1
        2014-10-20jquery 如何讓頁面不滾動8
        2012-11-02jquery有兩個id相同的div時候，第二個div無法觸發...
        2013-02-16如何經過js讓div在頁面滾動中固定不動18
        2014-05-26ie9 中想設置兩個div的滾動條同時滑動
        更多相關兩個div怎麼讓滑動事件統一的問題 >有多個兄弟級div,如何用jquery實現只讓當前點擊的DI...16
        2016-12-29如何讓頁面上兩個div中的滾動條（滑塊）同步運動1
        2015-04-25同一段JS代碼，修改ID後如何讓兩個DIV裏的內容都滾動呢？
        2017-01-17jquery怎麼對div不會隨着滾動條滾動而滾動1
        2014-10-20jquery 如何讓頁面不滾動8
        2012-11-02jquery有兩個id相同的div時候，第二個div無法觸發...
        2013-02-16如何經過js讓div在頁面滾動中固定不動18
        2014-05-26ie9 中想設置兩個div的滾動條同時滑動
        更多相關兩個div怎麼讓滑動事件統一的問題 >
        有多個兄弟級div,如何用jquery實現只讓當前點擊的DI...16
        2016-12-29如何讓頁面上兩個div中的滾動條（滑塊）同步運動1
        2015-04-25同一段JS代碼，修改ID後如何讓兩個DIV裏的內容都滾動呢？
        2017-01-17jquery怎麼對div不會隨着滾動條滾動而滾動1
        2014-10-20jquery 如何讓頁面不滾動8
        2012-11-02jquery有兩個id相同的div時候，第二個div無法觸發...
        2013-02-16如何經過js讓div在頁面滾動中固定不動18
        2014-05-26ie9 中想設置兩個div的滾動條同時滑動
        更多相關兩個div怎麼讓滑動事件統一的問題 >
        有多個兄弟級div,如何用jquery實現只讓當前點擊的DI...16
        2016-12-29如何讓頁面上兩個div中的滾動條（滑塊）同步運動1
        2015-04-25同一段JS代碼，修改ID後如何讓兩個DIV裏的內容都滾動呢？
        2017-01-17jquery怎麼對div不會隨着滾動條滾動而滾動1
        2014-10-20jquery 如何讓頁面不滾動8
        2012-11-02jquery有兩個id相同的div時候，第二個div無法觸發...
        2013-02-16如何經過js讓div在頁面滾動中固定不動18
        2014-05-26ie9 中想設置兩個div的滾動條同時滑動
        更多相關兩個div怎麼讓滑動事件統一的問題 >
        有多個兄弟級div,如何用jquery實現只讓當前點擊的DI...16
        2016-12-29如何讓頁面上兩個div中的滾動條（滑塊）同步運動1
        2015-04-25同一段JS代碼，修改ID後如何讓兩個DIV裏的內容都滾動呢？
        2017-01-17jquery怎麼對div不會隨着滾動條滾動而滾動1
        2014-10-20jquery 如何讓頁面不滾動8
        2012-11-02jquery有兩個id相同的div時候，第二個div無法觸發...
        2013-02-16如何經過js讓div在頁面滾動中固定不動18
        2014-05-26ie9 中想設置兩個div的滾動條同時滑動
        更多相關兩個div怎麼讓滑動事件統一的問題 ></div>
</div>
<div id="test_Right" onScroll="moveUp_Right();">
    <div class="test_Right">
        有多個兄弟級div,如何用jquery實現只讓當前點擊的DI...16
        2016-12-29如何讓頁面上兩個div中的滾動條（滑塊）同步運動1
        2015-04-25同一段JS代碼，修改ID後如何讓兩個DIV裏的內容都滾動呢？
        2017-01-17jquery怎麼對div不會隨着滾動條滾動而滾動1
        2014-10-20jquery 如何讓頁面不滾動8
        2012-11-02jquery有兩個id相同的div時候，第二個div無法觸發...
        2013-02-16如何經過js讓div在頁面滾動中固定不動18
        2014-05-26ie9 中想設置兩個div的滾動條同時滑動
        更多相關兩個div怎麼讓滑動事件統一的問題 >有多個兄弟級div,如何用jquery實現只讓當前點擊的DI...16
        2016-12-29如何讓頁面上兩個div中的滾動條（滑塊）同步運動1
        2015-04-25同一段JS代碼，修改ID後如何讓兩個DIV裏的內容都滾動呢？
        2017-01-17jquery怎麼對div不會隨着滾動條滾動而滾動1
        2014-10-20jquery 如何讓頁面不滾動8
        2012-11-02jquery有兩個id相同的div時候，第二個div無法觸發...
        2013-02-16如何經過js讓div在頁面滾動中固定不動18
        2014-05-26ie9 中想設置兩個div的滾動條同時滑動
        更多相關兩個div怎麼讓滑動事件統一的問題 >有多個兄弟級div,如何用jquery實現只讓當前點擊的DI...16
        2016-12-29如何讓頁面上兩個div中的滾動條（滑塊）同步運動1
        2015-04-25同一段JS代碼，修改ID後如何讓兩個DIV裏的內容都滾動呢？
        2017-01-17jquery怎麼對div不會隨着滾動條滾動而滾動1
        2014-10-20jquery 如何讓頁面不滾動8
        2012-11-02jquery有兩個id相同的div時候，第二個div無法觸發...
        2013-02-16如何經過js讓div在頁面滾動中固定不動18
        2014-05-26ie9 中想設置兩個div的滾動條同時滑動
        更多相關兩個div怎麼讓滑動事件統一的問題 >
        有多個兄弟級div,如何用jquery實現只讓當前點擊的DI...16
        2016-12-29如何讓頁面上兩個div中的滾動條（滑塊）同步運動1
        2015-04-25同一段JS代碼，修改ID後如何讓兩個DIV裏的內容都滾動呢？
        2017-01-17jquery怎麼對div不會隨着滾動條滾動而滾動1
        2014-10-20jquery 如何讓頁面不滾動8
        2012-11-02jquery有兩個id相同的div時候，第二個div無法觸發...
        2013-02-16如何經過js讓div在頁面滾動中固定不動18
        2014-05-26ie9 中想設置兩個div的滾動條同時滑動
        更多相關兩個div怎麼讓滑動事件統一的問題 >
        有多個兄弟級div,如何用jquery實現只讓當前點擊的DI...16
        2016-12-29如何讓頁面上兩個div中的滾動條（滑塊）同步運動1
        2015-04-25同一段JS代碼，修改ID後如何讓兩個DIV裏的內容都滾動呢？
        2017-01-17jquery怎麼對div不會隨着滾動條滾動而滾動1
        2014-10-20jquery 如何讓頁面不滾動8
        2012-11-02jquery有兩個id相同的div時候，第二個div無法觸發...
        2013-02-16如何經過js讓div在頁面滾動中固定不動18
        2014-05-26ie9 中想設置兩個div的滾動條同時滑動
        更多相關兩個div怎麼讓滑動事件統一的問題 >
    </div>
</div>

複製代碼

js:

//JS代碼
        var timer = null;
        var timers = null;
        //左側DIV的滾動事件
        function moveUp_Left() {
            //先刪除右側DIV的滾動事件，以避免自動觸發
            console.log(1)
            $("#test_Right").removeAttr("onScroll");

            //正常設值，同步兩個DIV的滾動幅度
            $("#test_Right").scrollLeft($("#test_Left").scrollLeft());
            $("#test_Right").scrollTop($("#test_Left").scrollTop());
            //取消延遲預定。【重點】鼠標滾動過程當中會屢次觸發本行代碼，至關於不停的延遲執行下面的預定
            clearTimeout(timer);

            //延遲恢復（預定）另外一個DIV的滾動事件，並將本預定返回給變量[timer]
            timer = setTimeout(function () {
                $("#test_Right").attr("onScroll", "moveUp_Right();");
            }, 300);
        }

        function moveUp_Right() {
            console.log(2)
            //先刪除右側DIV的滾動事件，以避免自動觸發
            $("#test_Left").removeAttr("onScroll");

            //正常設值，同步兩個DIV的滾動幅度
            $("#test_Left").scrollLeft($("#test_Right").scrollLeft());
            $("#test_Left").scrollTop($("#test_Right").scrollTop());
            //取消延遲預定。【重點】鼠標滾動過程當中會屢次觸發本行代碼，至關於不停的延遲執行下面的預定
            clearTimeout(timers);

            //延遲恢復（預定）另外一個DIV的滾動事件，並將本預定返回給變量[timer]
            timers = setTimeout(function () {
                $("#test_Left").attr("onScroll", "moveUp_Left();");
            }, 300);
        }
複製代碼