क्या कोई बच्चा नोड केंद्रित होने पर स्क्रॉल करने से पैरेंट कंटेनर को रोकने का कोई तरीका है?

Question

स्थिति: overflow: auto के साथ एक निश्चित ऊंचाई वाले पैरेंट div और स्क्रॉलबार की उपस्थिति को ट्रिगर करने के लिए पर्याप्त ऊंचाई के पर्याप्त बच्चे "लाइन-आइटम" divs हैं। इनमें से प्रत्येक बच्चे divs में tabindex = -1 है इसलिए प्रोग्रामेटिक रूप से केंद्रित किया जा सकता है।

जब इनमें से कोई भी बच्चा divs प्रोग्रामेटिक रूप से केंद्रित है, ब्राउज़र का डिफ़ॉल्ट व्यवहार (इस मामले में, क्रोम 55) नए केंद्रित बच्चे को केंद्र में रखने के लिए पैरेंट div को स्क्रॉल करना प्रतीत होता है। क्या इस व्यवहार को रोकने का कोई तरीका है?

Answer 1

हां और नहीं। पैरेंट तत्व को स्क्रॉल करने से केंद्रित तत्व (जिसे मैं जानता हूं) से रोकने का कोई तरीका नहीं है। हालांकि, आप पैरेंट तत्व को शीर्ष पर वापस स्क्रॉल करके स्क्रॉलिंग को पूर्ववत कर सकते हैं। सही ढंग से हो गया, यह उपयोगकर्ता के लिए ध्यान देने योग्य नहीं होगा।

ऐसा करने के लिए, जब भी आप प्रोग्रामेटिक रूप से किसी तत्व को फ़ोकस करते हैं, तो केंद्रित तत्व के मूल नोड के वर्तमान स्क्रॉल ऑफसेट को पुनर्प्राप्त करें और उस ऑफसेट पर scrollTop सेट करें।

var children = document.getElementsByClassName('child') 
 

 
for (var i = 0; i < children.length; i++) { 
 
    children[i].addEventListener('click', function (e) { 
 
    e.preventDefault 
 
    var focused = document.getElementById('focus') 
 
    var focusedParent = focused.parentNode 
 
    var savedOffset = focusedParent.scrollTop 
 
    focused.focus(); 
 
    focused.parentNode.scrollTop = savedOffset; 
 
    }) 
 
}

.parent { 
 
    height: 300px; 
 
    overflow: auto; 
 
} 
 

 
.child { 
 
    height: 50px; 
 
    background-color: gray; 
 
    border-bottom: 1px solid black; 
 
    color: white; 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
    line-height: 50px; 
 
    font-family: Arial; 
 
}

<div class="parent"> 
 
    <div class="child" tabIndex="-1">1</div> 
 
    <div class="child" tabIndex="-1">2</div> 
 
    <div class="child" tabIndex="-1">3</div> 
 
    <div class="child" tabIndex="-1">4</div> 
 
    <div class="child" tabIndex="-1">5</div> 
 
    <div class="child" tabIndex="-1">6</div> 
 
    <div class="child" tabIndex="-1">7</div> 
 
    <div class="child" tabIndex="-1">8</div> 
 
    <div class="child" tabIndex="-1" id="focus">9</div> 
 
    <div class="child" tabIndex="-1">10</div> 
 
</div>

यहाँ Codepen पर काम कर डेमो है।