कई iframes

के लिए स्क्रॉलिंग स्थिति को सिंक्रनाइज़ करने के लिए कैसे करें मेरे पास टैब पर आधारित HTML लेआउट है (5 कहें)। प्रत्येक टैब में मैं एक आईफ्रेम लोड करता हूं। आईफ्रेम सामग्री एक दूसरे की भिन्नता है कि उपयोगकर्ता टैब स्विच करके तुलना कर सकते हैं।कई iframes

मैं जावास्क्रिप्ट में, सभी iframes लंबवत और क्षैतिज स्क्रॉलिंग को सिंक्रनाइज़ कैसे कर सकता हूं? दूसरे शब्दों में, एक आईफ्रेम में स्क्रॉल करना उसी अन्य राशि से स्क्रॉल करना चाहिए, जिससे उपयोगकर्ता एक ही डेटा की तुलना कर सके।

बोनस पॉइंट्स: iframe सामग्री केवल तभी लोड की जाती है जब उपयोगकर्ता पहली बार टैब खोलता है। तो नए खुले आईफ्रेम सीधे उसी स्थान पर स्क्रॉल करना चाहिए जैसा पहले से ही खोला गया iframes है।

धन्यवाद।

स्रोत

2009-04-17 JB Hurteaux

हालांकि यह divs के लिए काम करता है, यह iframes के लिए काम नहीं करता है।

यहाँ आप क्या कर सकते हैं,

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

jQuery's scroll event साथ, आप उन्हें सिंक्रनाइज़ करने के लिए सक्षम होना चाहिए।

संपादित करें: कोई प्लगइन्स आवश्यक नहीं है।

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

स्रोत

2009-04-17 21:36:45

इसके लिए बहुत बहुत धन्यवाद। आपने मुझे एक प्रश्न का उत्तर देने में मदद की, मैंने पूछा कि कोई भी जवाब दे सकता है। http://stackoverflow.com/questions/7256086/how-can-i-make-2-divs-scroll-at-the-same-time/ – desbest

मैं सिंक्रनाइज़ overflowed div के इस तरह कोड का उपयोग:

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

स्रोत

2009-04-17 21:37:11

स्वीकृत समाधान केवल तभी कारगर साबित divs एक ही चौड़ाई यहाँ कोड है कि मेरे लिए काम किया है। यदि नहीं, तो यह एक अनंत लूप का कारण बनता है: # div1 स्क्रॉल # DIV2, तो # DIV2 की पुस्तक घटना स्क्रॉल # div1 आदि :)

संपादित समाधान:

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

स्रोत

2012-12-04 12:44:09 steve

क्या यह अनंत लूप समस्या को हल करता है? आईएसटीएम सचमुच सच्चे और झूठे के बीच फ्लिप करता है। – Dominator008

यह अनंत लूप समस्या हल करता है: हर दूसरे कॉल को छोड़ दिया जाएगा। ("स्किप" वैरिएबल फ्लिप, लेकिन जब $ ("# div2") स्क्रॉल (...) इसे कॉल करता है: इसे छोड़ दिया जाएगा।) – steve

पहली टिप्पणी के लिए +1 जो स्क्रॉलटॉप को अपडेट करते समय अनंत लूप समस्याओं के बारे में बात करता है।मैंने क्रोम और फ़ायरफ़ॉक्स को छोड़ दिए बिना काम किया लेकिन आईई 8 को इसकी जरूरत है या यह ताला लगा है। – mbokil

एक मनमाना संख्या सिंक्रनाइज़ करने के लिए के तत्वों का उपयोग निम्नलिखित कोड:

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

इसका उपयोग करना सरल सरल है। कहते हैं कि चलो आप के रूप में परिभाषित कई divs है:

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

वर्ग scrollDiv तुम सब लिखने की ज़रूरत के साथ सभी divs पर स्क्रॉलबार 'सिंक्रनाइज़ करने के लिए है:

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

स्रोत: http://blogs.msdn.com/b/matt/archive/2009/03/19/synchronizing-scrollbars-using-jquery.aspx

स्रोत

2013-08-30 15:48:07

मैं लगता है कि यह जवाब अनंत लूप को ठीक कर सकता है।

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

स्रोत

2013-10-10 06:49:59 javie

फ़्लिपिंग में देरी करने के लिए शायद एक सेटटाइमआउट() की आवश्यकता होगी, यह समाधान लूप समस्या हल करने वाला एकमात्र ऐसा है। – shuji

कई iframes

उत्तर

संबंधित मुद्दे