डीआईवी ऑटो स्क्रॉल

Question

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

Answer 1

आप राशि अपनी सामग्री द्वारा स्क्रॉल किया है स्थापित करने के लिए HTMLElement की scrollTop संपत्ति का उपयोग कर सकते हैं।

और आप जिस तत्व को स्क्रॉल करना चाहते हैं उसके offsetTop से स्क्रॉल करने के लिए आपको जिस राशि की आवश्यकता है उसे प्राप्त कर सकते हैं।

इस HTML के साथ उदाहरण के लिए:

<div id="container"> 
    <p id="item-1">foo</p> 
    <p id="item-2">bar</p> 
    <p id="item-3">baz</p> 
</div> 

आप तीसरे पैरा के लिए कंटेनर div स्क्रॉल करने के लिए इस जावास्क्रिप्ट इस्तेमाल कर सकते हैं:

document.getElementById("container").scrollTop = document.getElementById("item-3").offsetTop; 

Answer 2

जब आपका बटन क्लिक किया गया और कोई आइटम चयनित इस चयनित आइटम की फोकस() विधि को कॉल करता है। यह आपके तत्व को ऑटो स्क्रॉल कारण होगा:

<div style="height:80px; overflow:auto;"> 
    <input type="text" id="id1"><br><br> 
    <input type="text" id="id2"><br><br> 
    <input type="text" id="id3"><br><br> 
    <input type="text" id="id4"><br><br> 
    <input type="text" id="id5"><br><br> 
    <input type="text" id="id6"><br><br> 
</div> 
<input type="button" onclick="document.getElementById('id6').focus();"> 

Answer 3

फिर भी एक और विकल्प प्लगइन ScrollTo के साथ jQuery उपयोग करने के लिए है।

Answer 4

आप डीआईवी की स्क्रॉलटॉप या स्क्रोल लाइफ प्रॉपर्टी का भी उपयोग कर सकते हैं (स्क्रॉल क्षैतिज या लंबवत होने पर निर्भर करता है)।

मैंने इसे पहले किया है और 1 गति के बजाए इसे तरल रूप से स्क्रॉल करने के लिए सेटटाइमआउट ईवेंट का उपयोग किया है। यह JQuery के बिना है।

Answer 5

फिर भी एक और विकल्प ... एंकर।

असाइन प्रत्येक आइटम एक अद्वितीय ID, और आप किसी विशेष आइटम के लिए स्क्रॉल करने के लिए, निम्न JavaScript कोड निष्पादित चाहते हैं जब:

location.hash = itemID; 

... जहां itemID एक चर कि तत्व की आईडी होता है आप स्क्रॉल करना चाहते हैं।

स्टीव