संपादन बॉक्स में टाइप करने वाले वेबकिट ब्राउज़र पर स्क्रॉलिंग

Question

मुझे वेबकिट ब्राउज़र (क्रोम & सफारी) पर वेबसाइट मार्कअप के साथ कोई समस्या है, यानी जब मैं दाएं स्लाइडर के संपादन बॉक्स में कुछ टाइप करता हूं, तो यह बाएं क्षेत्र को स्क्रॉल करता है। एचटीएमएल कोड (इनपुट आईडी = "पैलेट" के साथ div के अंदर है) क्रोम या सफारी में

1. ओपन अगले लिंक
2. प्रकार -
   http://jsbin.com/obiyec/7
   http://jsbin.com/obiyec/7/edit:

   कृपया निम्न उदाहरण पर एक नज़र सही ऊपरी कोने में संपादन बॉक्स में कुछ

3. सूचना है कि बाएं क्षेत्र में स्क्रॉलबार बदलाव

यह बहुत ही इस मार्कअप मौलिक यदि संभव हो तो

प्र स्थानांतरण से स्क्रॉल बार रोकने के लिए और यह एक ही तरह से व्यवहार के रूप में यह एफएफ में है बनाने के लिए परिवर्तन की संभावना नहीं है?

Answer 1

यहां समस्या यह है कि ऐसा लगता है कि आप क्या कर रहे हैं और वास्तव में आप क्या कर रहे हैं दो अलग-अलग चीजें हैं।

यह एक निश्चित चौड़ाई और overflow: auto (div#kb-board) और सही पर इनपुट क्षेत्र के साथ छोड़ दिया पर div की तरह लग रहा असंबंधित तत्व हैं - लेकिन वे नहीं कर रहे हैं। इनपुट फ़ील्ड वास्तव में div#kb-board का बच्चा है लेकिन इसके माता-पिता (div#palette) में fixed स्थिति है इसलिए यह पृष्ठ के ऊपरी दाएं भाग में स्थित है।

नतीजतन, इनपुट फ़ील्ड वास्तव में div#kb-board के दाईं ओर है और जब आप इसमें टाइप करते हैं तो स्क्रॉल बार चलता है क्योंकि आप उस div के दाईं ओर फ़ोकस दे रहे हैं।

तो इस मामले में, मैं कहूंगा कि क्रोम सही व्यवहार दिखा रहा है।

इसे हल करने के लिए आपको को div#kb-board में घोंसला बंद करना चाहिए। चूंकि यह निश्चित स्थिति का उपयोग करता है, इसलिए इसे घोंसला करने की कोई आवश्यकता नहीं है।

<div id="kb-board"> 
    <div id="boards-container"> 
     <div id="lane">...</div> 
    </div> 
    <!-- div#palette was originally here --> 
</div> 
<div id="palette"> 
    <input type="text" value="Type here" /> 
</div> 

कार्य उदाहरण: http://jsbin.com/obiyec/8