मुझे क्षैतिज स्क्रॉलबार (मैं एक कस्टम स्क्रॉलबार ui) का उपयोग करके, मेरे प्रोजेक्ट में एक समाधान मिला, जिसमें कंटेनर 300 पीएक्स का पैडिंग-दायां और -300 पीएक्स का मार्जिन-दायां दिया गया। पैडिंग और -र्गिन इसे बनाते हैं ताकि सामान्य बच्चों को समान रूप से गठबंधन किया जा सके, सिवाय इसके कि कंटेनर में अतिरिक्त जगह भी है, यदि उस क्षेत्र से एक पूरी तरह से स्थित तत्व फैलता है। (स्क्रॉल करने योग्य क्षेत्र बाहरी सीमाओं के बाहर कुछ भी काटते हैं)
बेशक, यदि आपके पास स्क्रॉल क्षेत्र के दाईं ओर सामग्री है, तो इससे इसे विस्तारित किया जाता है। एक पारदर्शी पृष्ठभूमि के साथ जो एक दृश्य समस्या नहीं है; हालांकि यह माउस घटनाओं को अवरुद्ध करता है।
कि हल करने के लिए, मैं इतना की तरह स्क्रॉल देखने के भाई बहन के रूप में दो तत्व जोड़े,:
// this outer container resizes to match the size of scrollContainer
<div style={{position: "relative"}>
<div id="scrollContainer" style={{paddingRight: 300, marginRight: -300}}>
// stuff which might extend to the right
</div>
// the containers below resize with the outer container
// however, notice that the 2nd one is positioned only over the possibly-extended-onto area
<div id="insideArea" style={{position: "absolute", left: 0, right: 0, top: 0, bottom: 0}}
onMouseEnter={()=> {
// we're back inside, so enable scroll-container mouse-events
$("scrollContainer").css("pointer-events", "auto");
// prevent self from blocking mouse events for scrollContainer
$("insideArea").css("display", "none");
// re-enable extend-area div, so we know when mouse moves over it
$("extendArea").css("display", "block");
}/>
<div id="extendArea" style={{position: "absolute", top: 0, bottom: 0, left: "100%", width: 300}}
onMouseEnter={()=> {
// we're over the extend-area, so disable scroll-container mouse events
$("scrollContainer").css("pointer-events", "none");
// prevent self from blocking mouse events for behind-extend-area elements
$("#extendArea").css("display", "none");
// re-enable inside-area div, so we know when mouse moves over it
$("#insideArea").css("display", "block");
}/>
ऊपर क्या करता है? यह ऐसा करता है जब आपका माउस सामान्य स्क्रॉल-व्यू क्षेत्र में प्रवेश करता है, पॉइंटर-इवेंट सक्षम होते हैं, जिससे आप अंदर सामानों पर क्लिक कर सकते हैं - लेकिन जब आपका माउस विशेष "विस्तारित" क्षेत्र में जाता है, तो स्क्रॉल-व्यू माउस-ईवेंट होते हैं अक्षम, आपको उस क्षेत्र के पीछे सामान्य वस्तुओं पर क्लिक करने देता है।
यह समाधान शायद किसी और के द्वारा उपयोग नहीं किया जाएगा, लेकिन मैंने इसे खोजने में काफी समय बिताया, मैंने सोचा कि मैं इसे वैसे भी साझा करूंगा!