[javascript] मैं jQuery का उपयोग करके, दृश्य में स्क्रॉल करने के लिए तत्व कैसे प्राप्त करूं?



Answers

scrollIntoView नामक एक डोम विधि है, जो सभी प्रमुख ब्राउज़रों द्वारा समर्थित है, जो व्यूपोर्ट के शीर्ष / बाईं ओर एक तत्व को संरेखित करेगी (या जितना संभव हो सके बंद करें)।

$("#myImage")[0].scrollIntoView();

समर्थित ब्राउज़र पर, आप विकल्प प्रदान कर सकते हैं:

$("#myImage")[0].scrollIntoView({
    behavior: "smooth", // or "auto" or "instant"
    block: "start" // or "end"
});

वैकल्पिक रूप से, यदि सभी तत्वों में अद्वितीय आईडी हैं, तो आप बैक / फॉरवर्ड बटन समर्थन के लिए location ऑब्जेक्ट की hash प्रॉपर्टी को बदल सकते हैं:

$(document).delegate("img", function (e) {
    if (e.target.id)
        window.location.hash = e.target.id;
});

उसके बाद, बस -20 द्वारा scrollTop / scrollLeft गुणों को समायोजित करें:

document.body.scrollLeft -= 20;
document.body.scrollTop -= 20;
Question

मेरे पास <ul><li><img... का उपयोग करके ग्रिड प्रारूप में छवियों वाला एक HTML दस्तावेज़ है। ब्राउज़र विंडो में लंबवत और क्षैतिज स्क्रॉलिंग दोनों हैं।

प्रश्न: जब मैं किसी छवि <img> पर क्लिक करता हूं, तो फिर मैं पूरे दस्तावेज़ को उस स्थिति पर स्क्रॉल करने के लिए कैसे प्राप्त करूं जहां मैंने जिस छवि पर क्लिक किया है वह top:20px; left:20px पर है top:20px; left:20px top:20px; left:20px ?

मेरे पास समान पदों के लिए यहां एक ब्राउज़ किया गया है ... हालांकि मैं जावास्क्रिप्ट के लिए काफी नया हूं, और यह समझना चाहता हूं कि यह मेरे लिए कैसे प्राप्त किया जाता है।







नीचे या नीचे स्क्रॉल करने के लिए सरल 2 कदम।

चरण 1: स्क्रॉल करने योग्य (वार्तालाप) div की पूर्ण ऊंचाई प्राप्त करें।

चरण 2: चरण 1 में प्राप्त मान का उपयोग करके उस स्क्रोल करने योग्य (वार्तालाप) div पर scrollTop लागू करें।

var fullHeight = $('#conversation')[0].scrollHeight;

$('#conversation').scrollTop(fullHeight);

वार्तालाप div पर प्रत्येक परिशिष्ट के लिए उपरोक्त चरणों को लागू किया जाना चाहिए।




मेरे यूआई में अंगूठे के भीतर अंगूठे की लंबवत स्क्रॉलिंग सूची है लक्ष्य लक्ष्य अंगूठे के केंद्र में वर्तमान अंगूठे को सही बनाना था। मैंने अनुमोदित उत्तर से शुरू किया, लेकिन पाया कि वर्तमान अंगूठे को वास्तव में केंद्रित करने के लिए कुछ बदलाव थे। मनाइए कि यह किसी और के लिए सहायक हो।

मार्कअप:

<ul id='thumbbar'>
    <li id='thumbbar-123'></li>
    <li id='thumbbar-124'></li>
    <li id='thumbbar-125'></li>
</ul>

jQuery:

// scroll the current thumb bar thumb into view
heightbar   = $('#thumbbar').height();
heightthumb = $('#thumbbar-' + pageid).height();
offsetbar   = $('#thumbbar').scrollTop();


$('#thumbbar').animate({
    scrollTop: offsetthumb.top - heightbar / 2 - offsetbar - 20
});



jQuery.scrollTo प्लगइन पर एक नज़र डालें। यहां एक demo

इस प्लगइन में बहुत सारे विकल्प हैं जो scrollIntoView आपको प्रदान करते हैं। उदाहरण के लिए, आप स्क्रॉलिंग को चिकनी होने के लिए सेट कर सकते हैं, और फिर स्क्रॉलिंग समाप्त होने पर कॉलबैक सेट कर सकते हैं।

आप "स्क्रॉल" के साथ टैग किए गए सभी JQuery प्लगइन पर भी एक नज़र डाल सकते हैं।




Links