Cách đồng bộ hóa vị trí cuộn cho một số iframe

Tôi có bố cục HTML dựa trên các tab (ví dụ 5). Trong mỗi tab tôi tải một khung nội tuyến. Nội dung iframe là các biến thể của nhau mà người dùng có thể so sánh bằng cách chuyển đổi tab.Cách đồng bộ hóa vị trí cuộn cho một số iframe

Làm cách nào để, trong javascript, đồng bộ hóa cuộn của tất cả iframe theo chiều dọc và chiều ngang? Nói cách khác, cuộn trong một khung nội tuyến sẽ cuộn theo cùng một lượng tất cả các iframe khác, cho phép người dùng so sánh cùng một dữ liệu.

Điểm thưởng: nội dung khung nội tuyến chỉ được tải khi người dùng mở tab lần đầu tiên. Vì vậy, ifram mới được mở sẽ di chuyển trực tiếp đến cùng một vị trí như iframe đã mở.

Cảm ơn.

Nguồn

2009-04-17 JB Hurteaux

Trong khi tính năng này hoạt động cho div, nó không hoạt động đối với iframe.

Đây là những gì bạn có thể làm,

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

Với jQuery's scroll event, bạn sẽ có thể đồng bộ hóa chúng.

Chỉnh sửa: Không cần plugin. Dưới đây là đoạn code mà làm việc cho tôi:

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

Nguồn

2009-04-17 21:36:45

Cảm ơn rất nhiều vì điều này. Bạn đã giúp tôi trả lời một câu hỏi tôi hỏi rằng không ai có thể trả lời. http://stackoverflow.com/questions/7256086/how-can-i-make-2-divs-scroll-at-the-same-time/ – desbest

Tôi đồng bộ hóa tràn của div sử dụng mã như thế này:

frame1.onscroll = function(e) { 
    frame2.scrollTop = frame1.scrollTop; 
    frame2.scrollLeft = frame1.scrollLeft; 
};

Nguồn

2009-04-17 21:37:11

giải pháp chấp nhận chỉ hoạt động nếu divs có chiều rộng tương tự. Nếu không, nó gây ra một vòng lặp vô hạn: cuộn # div1 # div2, sau đó # div2 của cuộn sự kiện cuộn # div1 vv :)

giải pháp được sửa đổi:

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

Nguồn

2012-12-04 12:44:09 steve

Điều đó có giải quyết được vấn đề vòng lặp vô hạn không? ISTM "bỏ qua" flips giữa đúng và sai vô hạn. – Dominator008

Nó giải quyết vấn đề vòng lặp vô hạn: mọi cuộc gọi thứ hai sẽ bị bỏ qua. ("bỏ qua" biến flips, nhưng khi $ ("# div2"). scroll (...) gọi nó: nó sẽ bị bỏ qua.) – steve

+1 cho bình luận đầu tiên nói về các vấn đề vòng lặp vô hạn khi cập nhật scrolltop.Tôi thấy Chrome và Firefox hoạt động mà không bỏ qua nhưng IE8 cần nó hoặc nó bị khóa. – mbokil

Để đồng bộ hóa một số tùy ý các yếu tố sử dụng mã sau:

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

Sử dụng đây là SUPER đơn giản. Cho phép nói rằng bạn có một vài divs định nghĩa là:

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

Để đồng bộ hóa các thanh cuộn trên tất cả các div với lớp scrollDiv tất cả các bạn cần phải viết là:

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

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

Nguồn

2013-08-30 15:48:07

tôi nghĩ rằng câu trả lời này có thể sửa chữa vòng lặp vô hạn.

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

Nguồn

2013-10-10 06:49:59 javie

Giải pháp này là giải pháp duy nhất giải quyết vấn đề vòng lặp. – shuji

Cách đồng bộ hóa vị trí cuộn cho một số iframe

Trả lời

Các vấn đề liên quan