स्टैनली का जवाब उत्कृष्ट था, लेकिन इसमें एक दुर्भाग्यपूर्ण बग था: स्क्रॉलबार के छायांकित क्षेत्र को क्लिक करने से अब आपके द्वारा चुने गए चयन पर कूदता नहीं है। इसके बजाय, आपको जो मिलता है वह स्क्रॉलबार की स्थिति में बहुत छोटा और कुछ कष्टप्रद वृद्धि है।
परीक्षण किया गया: फ़ायरफ़ॉक्स के 4 संस्करण (100% प्रभावित), क्रोम के 4 संस्करण (50% प्रभावित)।
यहाँ मेरा jsfiddle है । आप इसे एक चालू / बंद (सच्चा / गलत) संस्करण के साथ प्राप्त कर सकते हैं, जो एक बार में चालू करने के लिए केवल एक ऑनस्कॉल () घटना की अनुमति देता है:
var scrolling = false;
$(".wrapper1").scroll(function(){
if(scrolling) {
scrolling = false;
return true;
}
scrolling = true;
$(".wrapper2")
.scrollLeft($(".wrapper1").scrollLeft());
});
$(".wrapper2").scroll(function(){
if(scrolling) {
scrolling = false;
return true;
}
scrolling = true;
$(".wrapper1")
.scrollLeft($(".wrapper2").scrollLeft());
});
समस्या व्यवहार उत्तर स्वीकृत के साथ:
वास्तव में वांछित व्यवहार:
तो, बस ऐसा क्यों होता है? यदि आप कोड के माध्यम से चलते हैं, तो आप देखेंगे कि wrapper1 कॉल आवरण 2 के स्क्रॉललेफ्ट, और आवरण 2 के कॉल आवरण 1 को स्क्रॉललेट कहते हैं, और इसे अनंत रूप से दोहराते हैं, इसलिए, हमारे पास एक अनंत लूप समस्या है। या, इसके बजाय: उपयोगकर्ता की निरंतर स्क्रॉलिंग आवरण के कॉलगर्ल के कॉल के साथ संघर्ष करती है, एक घटना संघर्ष होता है, और अंतिम परिणाम स्क्रॉलबार में कूद नहीं होता है।
आशा है कि यह किसी और की मदद करता है!