How to synchronize scrolling positions for several

2019-01-07 15:24发布

站内问答 / JavaScript
1541 5 4

I have an HTML layout based on tabs (say 5). In each tab I load an iframe. The iframe contents are variations of one another that the user can compare by switching tabs.

How can I, in javascript, synchronize the scrolling of all iframes vertically and horizontally? In other words, scrolling in one iframe should scroll by the same amount all other iframes, allowing the user to compare the same data.

Bonus points: iframe content is loaded only when the user opens the tab for the first time. So newly opened iframes should directly scroll to the same place as already opened iframes.

Thanks.

5条回答
疯言疯语
2楼-- · 2019-01-07 15:51

To synchronise an arbitrary number of elements use the following code:

jQuery.fn.synchroniseScroll = function() {

        var elements = this;
        if (elements.length <= 1) return;

        elements.scroll(
        function() {
            var left = $(this).scrollLeft();
            var top = $(this).scrollTop();
            elements.each(
            function() {
                if ($(this).scrollLeft() != left) $(this).scrollLeft(left);
                if ($(this).scrollTop() != top) $(this).scrollTop(top);
            }
            );
        });
    }

Using this is SUPER simple. Lets say you have several divs defined as:

<div class=”scrollDiv” style=”overflow:auto;”> .. some large content</div>

To synchronize the scrollbars’ on all divs with the class scrollDiv all you need to write is:

$(“.scrollDiv”).synchroniseScroll();

Source: http://blogs.msdn.com/b/matt/archive/2009/03/19/synchronizing-scrollbars-using-jquery.aspx

查看更多
0人赞 添加讨论(0) 举报
甜甜的少女心
3楼-- · 2019-01-07 15:53

I synchronize overflowed div's using code like this:

frame1.onscroll = function(e) {
   frame2.scrollTop = frame1.scrollTop;
   frame2.scrollLeft = frame1.scrollLeft;
 };
查看更多
0人赞 添加讨论(0) 举报
虎瘦雄心在
4楼-- · 2019-01-07 16:10

Accepted solution works only if divs have the same width. If not, it causes an infinite loop: #div1 scrolls #div2, then #div2's scroll event scrolls #div1 etc :)

Edited solution:

var skip = false;
$("#div1").scroll(function () {
    if (skip){skip=false; return;} else skip=true; 
    $("#div2").scrollTop($("#div1").scrollTop());
    $("#div2").scrollLeft($("#div1").scrollLeft());
});
$("#div2").scroll(function () { 
    $("#div1").scrollTop($("#div2").scrollTop());
    $("#div1").scrollLeft($("#div2").scrollLeft());
});
查看更多
0人赞 添加讨论(0) 举报
三岁会撩人
5楼-- · 2019-01-07 16:10

I think this answer can fix the infinite loop.

      var jsScroll0;
      var jsScroll1;
      windows[0].on('scroll.scrollInTheSameTime', function() {
        if (jsScroll1 === true) {
          jsScroll1 = false;
          return;
        }
        jsScroll0 = true;
        windows[1].scrollTop(windows[0].scrollTop());
        windows[1].scrollLeft(windows[0].scrollLeft());
      });
      windows[1].on('scroll.scrollInTheSameTime', function() {
        if (jsScroll0 === true) {
          jsScroll0 = false;
          return;
        }
        jsScroll1 = true;
        windows[0].scrollTop(windows[1].scrollTop());
        windows[0].scrollLeft(windows[1].scrollLeft());
        // jsScroll = false;
      });
查看更多
0人赞 添加讨论(0) 举报
ら.Afraid
6楼-- · 2019-01-07 16:12

While this works for divs, it does not work for iframes.

Here's what you can do, 

$($('#iframe1').contents()).scroll(function(){
    $($('#iframe2').contents()).scrollTop($(this).scrollTop());
});

With jQuery's scroll event, you should be able to synchronize them.

Edit: No plugins required. Here's the code that worked for me:

<html>
<head>
<SCRIPT language="javascript" type="text/javascript" src="jquery-1.3.2.js"></SCRIPT>
<SCRIPT>
$(document).ready(function()
{
$("#div1").scroll(function () { 
        $("#div2").scrollTop($("#div1").scrollTop());
        $("#div2").scrollLeft($("#div1").scrollLeft());
    });
$("#div2").scroll(function () { 
        $("#div1").scrollTop($("#div2").scrollTop());
        $("#div1").scrollLeft($("#div2").scrollLeft());
    });

});

</SCRIPT>
</head>
<body>
<div id="div1" style="overflow:auto;height:100px;width:200px;border:1px solid black;">
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
</div>

<div id="div2" style="overflow:auto;height:100px;width:200px;border:1px solid black;">
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
</div>

</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)