JQuery का उपयोग करके मुझे देखने के लिए एक तत्व कैसे मिलेगा?

169

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

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

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

javascript jquery

— नासिर
स्रोत

की डुप्लिकेट: jQuery में एक तत्व को कैसे स्क्रॉल करें?

— हिप्पिट्रैयल

192

चूंकि आप जानना चाहते हैं कि यह कैसे काम करता है, इसलिए मैं इसे चरण-दर-चरण समझाता हूं।

सबसे पहले आप एक फ़ंक्शन को छवि के क्लिक हैंडलर के रूप में बांधना चाहते हैं:

$('#someImage').click(function () {
    // Code to do scrolling happens here
});

कि छवि के साथ क्लिक हैंडलर लागू होगा id="someImage"। यदि आप सभी छवियों के लिए यह करना चाहते हैं , के '#someImage'साथ बदलें 'img'।

अब वास्तविक स्क्रॉलिंग कोड के लिए:

छवि ऑफ़सेट्स (दस्तावेज़ के सापेक्ष) प्राप्त करें:
```
var offset = $(this).offset(); // Contains .top and .left
```
20 से घटाएँ topऔर left:
```
offset.left -= 20;
offset.top -= 20;
```
अब स्क्रॉल-टॉप और स्क्रॉल-बाएँ CSS गुणों को चेतन करें <body>और <html>:
```
$('html, body').animate({
    scrollTop: offset.top,
    scrollLeft: offset.left
});
```

— डेविड टैंग
स्रोत

3

यह केवल साधारण लेआउट के लिए काम करता है। यह सभी मामलों को संभाल नहीं करता है जिस तरह से W3C .scrollIntoViewविधि करता है जब तत्वों को कई बह निकला कंटेनरों के भीतर घोंसला किया जाता है।

— natevw

2

पहिया को फिर से मजबूत करने के लिए क्यों? Element.scrollIntoView(): developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

— सर्ज

@ क्योंकि यह एक कामकाजी मसौदा है जिसे सभी ब्राउज़रों में लागू नहीं किया गया है

— जॉन स्मिथ

@JohnSmith कृपया ध्यान से, लिंक मैं पोस्ट, "ब्राउज़र संगतता" अनुभाग पढ़ें आप कोई ब्राउज़र समर्थन नहीं करता है देखेंगेscrollIntoView

— सर्ज

इसके बारे में @ क्षमा करें, मुझे एहसास नहीं हुआ, स्क्रॉल इनटू व्यूओशन भी था (जो ऐसा है जो पर्याप्त रूप से समर्थित नहीं है)। मुझे लगता है कि यह काफी अच्छा है।

— जॉन स्मिथ

377

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

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

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

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

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

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

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

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

— एंडी ई
स्रोत

2

धन्यवाद! 5 अन्य SO लेख और आपने इसे पूरी तरह से nailed किया। मेरा उपयोग मामला बूटस्ट्रैप संवाद में एक कंटेनर था जिसे देखने के लिए स्क्रॉल करने की आवश्यकता है।

— स्टीफन पैटन

10

एक नोट के रूप में: $("#myImage")[0].scrollIntoView(false);खिड़की के नीचे तत्व को संरेखित करेगा।

— फिलिप

1

खबरदार: "चिकनी" व्यवहार व्यापक रूप से समर्थित नहीं है, और scrollIntoViewकुछ प्रकार के एनीमेशन के बिना उपयोगकर्ताओं के लिए एक भ्रमित अनुभव हो सकता है।

— कोडी डुवल

1

@ जॉनहोनेल: यह गलत है, यहां तक कि IE 5.5 scrollIntoViewके बूलियन पैरामीटर के साथ था । मैं कोशिश करूँगा और बाद में caniuse.com के लिए एक पुल अनुरोध भेजूँगा।

— एंडी ई

1

नोट: क्रोम का उपयोग करते हुए, मैं <td>तत्वों को देखने में स्क्रॉल नहीं कर सका , इसके बजाय उनके माता-पिता ( <tr>) को स्क्रॉल करना पड़ा और यह काम किया।

— क्रेजीटीम

13

सबसे सरल समाधान मैंने देखा है

var offset = $("#target-element").offset();
$('html, body').animate({
    scrollTop: offset.top,
    scrollLeft: offset.left
}, 1000);

यहाँ ट्यूटोरियल

— मैट वॉटसन
स्रोत

इसे कम सरल बनाने के जोखिम पर, मैंने इसे क्षैतिज स्क्रॉलिंग का समर्थन करने के लिए संपादित किया।

— जेपी

7

तत्व को सीधे दृश्य में स्क्रॉल करने की विधियाँ हैं, लेकिन यदि आप किसी तत्व के सापेक्ष किसी बिंदु पर स्क्रॉल करना चाहते हैं, तो आपको इसे मैन्युअल रूप से करना होगा:

क्लिक हैंडलर के अंदर, दस्तावेज़ के सापेक्ष तत्व की स्थिति प्राप्त करें, घटाएं 20और उपयोग करें window.scrollTo:

var pos = $(this).offset();
var top = pos.top - 20;
var left = pos.left - 20;
window.scrollTo((left < 0 ? 0 : left), (top < 0 ? 0 : top));

— फेलिक्स क्लिंग
स्रोत

7

JQuery.scrollTo प्लगइन पर एक नज़र है । यहाँ एक डेमो है ।

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

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

— रोब स्टीवेन्सन-लेगेट
स्रोत

मैं अपने मामले में हर ब्राउज़र में अलग-अलग ऑफ़सेट / पोज़िशन पा रहा था, और इस प्लगइन ने मेरे लिए इसे ठीक करने में मदद की! धन्यवाद!

— लॉरेलब सिप

4

यहां निर्मित ब्राउज़र की कार्यक्षमता में त्वरित रूप से मैप करने के लिए एक त्वरित jQuery प्लगइन है:

$.fn.ensureVisible = function () { $(this).each(function () { $(this)[0].scrollIntoView(); }); };

...

$('.my-elements').ensureVisible();

— लूटना
स्रोत

3

परीक्षण और त्रुटि के बाद मैं इस फ़ंक्शन के साथ आया, iframe के साथ भी काम करता है।

function bringElIntoView(el) {    
    var elOffset = el.offset();
    var $window = $(window);
    var windowScrollBottom = $window.scrollTop() + $window.height();
    var scrollToPos = -1;
    if (elOffset.top < $window.scrollTop()) // element is hidden in the top
        scrollToPos = elOffset.top;
    else if (elOffset.top + el.height() > windowScrollBottom) // element is hidden in the bottom
        scrollToPos = $window.scrollTop() + (elOffset.top + el.height() - windowScrollBottom);
    if (scrollToPos !== -1)
        $('html, body').animate({ scrollTop: scrollToPos });
}

— टोन स्कोडा
स्रोत

2

बस एक टिप। फ़ायरफ़ॉक्स पर ही काम करता है

Element.scrollIntoView ();

— wp छात्र
स्रोत

4

यह बूलियन पैरामीटर या सभी मापदंडों के साथ सभी ब्राउज़रों के लिए काम कर रहा है। केवल अधिक उन्नत ऑब्जेक्ट पैरामीटर कम समर्थित है।

— रिस

developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView के अनुसार इसके लिए ब्राउज़र समर्थन की सामान्य कमी है

— lfender6445

यह अब केवल ओपेरा मिनी के लिए पर्याप्त रूप से समर्थित है: caniuse.com/#search=scrollIntoView

— जॉन मैग्नोलिया

वहाँ इसके लिए बहुत हल्के पॉलीफ़िल की संख्या है।

— मार्टिन जेम्स

1

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

मार्कअप:

<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
});

— Xeo
स्रोत

0

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

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

Step2: उस स्क्रॉल करने योग्य (वार्तालाप) div पर step1 को लागू करें, जो चरण 1 में प्राप्त मूल्य का उपयोग करके किया गया है।

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

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

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

— शिव कुमार पी
स्रोत

0

एक समाधान खोजने की कोशिश करने के बाद, जिसने हर परिस्थिति को संभाला (स्क्रॉल को एनिमेट करने का विकल्प, ऑब्जेक्ट के चारों ओर पैडिंग एक बार जब यह स्क्रॉल हो जाता है, तो एक अस्पष्ट रूप में अस्पष्ट परिस्थितियों में भी काम करता है), मैंने आखिरकार इस पर अपना समाधान लिखना शुरू कर दिया। जब से यह काम करने लगता है जब कई अन्य समाधान विफल हो गए, मैंने सोचा कि मैं इसे साझा करूंगा:

function scrollIntoViewIfNeeded($target, options) {

    var options = options ? options : {},
    $win = $($target[0].ownerDocument.defaultView), //get the window object of the $target, don't use "window" because the element could possibly be in a different iframe than the one calling the function
    $container = options.$container ? options.$container : $win,        
    padding = options.padding ? options.padding : 20,
    elemTop = $target.offset().top,
    elemHeight = $target.outerHeight(),
    containerTop = $container.scrollTop(),
    //Everything past this point is used only to get the container's visible height, which is needed to do this accurately
    containerHeight = $container.outerHeight(),
    winTop = $win.scrollTop(),
    winBot = winTop + $win.height(),
    containerVisibleTop = containerTop < winTop ? winTop : containerTop,
    containerVisibleBottom = containerTop + containerHeight > winBot ? winBot : containerTop + containerHeight,
    containerVisibleHeight = containerVisibleBottom - containerVisibleTop;

    if (elemTop < containerTop) {
        //scroll up
        if (options.instant) {
            $container.scrollTop(elemTop - padding);
        } else {
            $container.animate({scrollTop: elemTop - padding}, options.animationOptions);
        }
    } else if (elemTop + elemHeight > containerTop + containerVisibleHeight) {
        //scroll down
        if (options.instant) {
            $container.scrollTop(elemTop + elemHeight - containerVisibleHeight + padding);
        } else {
            $container.animate({scrollTop: elemTop + elemHeight - containerVisibleHeight + padding}, options.animationOptions);
        }
    }
}

$target यदि आवश्यक हो तो जिस ऑब्जेक्ट को आप स्क्रॉल करना चाहते हैं, वह एक jQuery ऑब्जेक्ट है।

options (वैकल्पिक) में किसी वस्तु में पारित निम्नलिखित विकल्प हो सकते हैं:

options.$container- $ लक्ष्य के दूसरे तत्व की ओर इशारा करते हुए एक jQuery वस्तु (दूसरे शब्दों में, स्क्रॉलबार के साथ डोम में तत्व)। विंडो में डिफ़ॉल्ट जिसमें $ लक्ष्य तत्व होता है और एक iframe विंडो का चयन करने के लिए पर्याप्त स्मार्ट होता है। $ को संपत्ति के नाम में शामिल करना याद रखें।

options.padding- जब यह दृश्य में स्क्रॉल किया जाता है तो ऑब्जेक्ट के ऊपर या नीचे जोड़ने के लिए पिक्सेल में पैडिंग। इस तरह यह खिड़की के किनारे के खिलाफ सही नहीं है। 20 की कमी।

options.instant- अगर सही पर सेट किया गया है, तो jQuery के चेतन का उपयोग नहीं किया जाएगा और स्क्रॉल तुरंत सही स्थान पर पॉप होगा। झूठे की अवहेलना करता है।

options.animationOptions- कोई भी jQuery विकल्प जिसे आप jQuery के चेतन समारोह में देखना चाहते हैं ( http://api.jquery.com/animate/ देखें )। इसके साथ, आप एनीमेशन की अवधि को बदल सकते हैं या स्क्रॉल पूरा होने पर कॉलबैक फ़ंक्शन निष्पादित कर सकते हैं। यह केवल तभी काम करता है जब options.instantझूठे के लिए सेट किया गया हो। अगर आपको इंस्टेंट एनिमेशन की जरूरत है लेकिन कॉलबैक के साथ, options.animationOptions.duration = 0उपयोग करने के बजाय सेट करें options.instant = true।

— Dallin
स्रोत