ओवरफ्लो हुए Div के भीतर मैं किसी तत्व को कैसे स्क्रॉल करूं?

Question

मेरे पास एक div के अंदर 20 सूची आइटम हैं जो केवल एक बार में 5 दिखा सकते हैं। आइटम # 10, और फिर आइटम # 20 पर स्क्रॉल करने का एक अच्छा तरीका क्या है? मैं सभी वस्तुओं की ऊंचाई जानता हूं।

scrollToप्लग इन को इस करता है, लेकिन इसके स्रोत सुपर वास्तव में इसे में हो रही बिना समझने के लिए आसान नहीं है। मैं इस प्लगइन का उपयोग नहीं करना चाहता।

के मैं एक समारोह है कि 2 तत्वों लेता है मान लीजिए $parentDiv, $innerListItemन तो $innerListItem.offset().topहै और न ही $innerListItem.positon().topमुझे $ parentDiv के लिए सही scrollTop देता है।

Comments

आपके अपडेट के कारण मेरा उत्तर हटा दिया गया। लेकिन मेरा विश्वास करो, पहले भी यही रवैया रहा था, स्थिति और मार्जिन के साथ बहुत सारे ब्राउज़र quirks हैं, आदि ... प्लगइन एक बहुत सरल मार्ग और कम समय लेने वाला है, और GZip से पहले केवल 3k है ।

— निक Craver

वैसे भी ScrollTo प्लगइन का उपयोग करें। यह कठिन नहीं है। $("#container").scrollTo(target, duration, options)। टारगेट सिर्फ ए #anchor। किया हुआ।

— रयान मैक्ग्रे

ऐसा लगता है कि वहाँ एक प्लगइन के बिना ऐसा करने के लिए ज्ञान होना चाहिए। कल बीमार स्रोत पढ़ना शुरू

— mkoryak

@mkoryak - ज्ञान बाहर है, लेकिन जब आप ब्राउज़र के लिए खाते हैं, तो आप मूल रूप से समाप्त हो जाते हैं ... .scrollTo प्लगइन , तो हर समय पहिया का फिर से आविष्कार क्यों करें?

— निक Craver

IMHO, आप संभवत: आज आपको .scrollTo से बाहर की जरूरत के सटीक सबसेट के साथ समाप्त करेंगे । लेकिन कुछ महीनों के समय में, जबकि .scrollTo को IE9, FF4 और Chrome 6 में अपडेट कर दिया गया है, आपको इससे बचने के लिए शुरू करना होगा ... 3k इससे बचने के लिए बहुत कम कीमत की तरह लगता है।

— विम

Answer 1

$innerListItem.position().topवास्तव में के सापेक्ष है .scrollTop()अपनी पहली स्थिति में पूर्वज के। तो सही $parentDiv.scrollTop()मूल्य की गणना करने का तरीका यह सुनिश्चित करना है कि $parentDivयह तैनात है। यदि यह पहले से ही स्पष्ट नहीं है position, तो उपयोग करें position: relative। तत्वों $innerListItemऔर उसके सभी पूर्वजों $parentDivको कोई स्पष्ट स्थिति नहीं चाहिए। अब आप इसके $innerListItemसाथ स्क्रॉल कर सकते हैं :

// Scroll to the top
$parentDiv.scrollTop($parentDiv.scrollTop() + $innerListItem.position().top);

// Scroll to the center
$parentDiv.scrollTop($parentDiv.scrollTop() + $innerListItem.position().top
    - $parentDiv.height()/2 + $innerListItem.height()/2);

Answer 2

यह मेरा अपना प्लगइन है (सूची के शीर्ष में तत्व को स्थान देगा। विशेष रूप से के लिए overflow-y : auto। साथ काम नहीं कर सकता overflow-x!)।

नोट : elemएक तत्व का HTML चयनकर्ता है जिसे पृष्ठ पर स्क्रॉल किया जाएगा। कुछ भी jQuery, जैसे द्वारा समर्थित: #myid, div.myclass, $(jquery object), [डोम वस्तु], आदि

jQuery.fn.scrollTo = function(elem, speed) { 
    $(this).animate({
        scrollTop:  $(this).scrollTop() - $(this).offset().top + $(elem).offset().top 
    }, speed == undefined ? 1000 : speed); 
    return this; 
};

यदि आपको एनिमेटेड होने की आवश्यकता नहीं है, तो उपयोग करें:

jQuery.fn.scrollTo = function(elem) { 
    $(this).scrollTop($(this).scrollTop() - $(this).offset().top + $(elem).offset().top); 
    return this; 
};

कैसे इस्तेमाल करे:

$("#overflow_div").scrollTo("#innerItem");
$("#overflow_div").scrollTo("#innerItem", 2000); //custom animation speed 

नोट: #innerItemअंदर कहीं भी हो सकता है #overflow_div। यह वास्तव में एक सीधा बच्चा नहीं है।

फ़ायरफ़ॉक्स (23) और क्रोम (28) में परीक्षण किया गया।

यदि आप पूरे पृष्ठ को स्क्रॉल करना चाहते हैं, तो इस प्रश्न की जाँच करें ।

Comments

क्या है elem?? आप इसे बिल्कुल नहीं समझाएंगे।

— विस्कॉन्सिन

यदि आप fn.scrollTo में jQuery के बदले $ स्वैप करते हैं तो आपको बेहतर माइलेज / गैर-संघर्ष मिलता है

— बैरी

इसके साथ बड़ा दोष, आपके स्कोप का नहीं होना: $(this).scrollTop($(this).scrollTop() - $(this).offset().top + $(elem, $(this)).offset().top);- संबंध

— ल्यूक स्नोडेन

यदि आप पृष्ठ और तत्व के बीच कुछ शीर्ष मार्जिन छोड़ना चाहते हैं (जो कुछ मामलों में बेहतर लग सकता है), उदाहरण के लिए, घटाएं, 10px, जैसे $(this).scrollTop() - $(this).offset().top + $(elem).offset().top - 10:।

— लेप

यदि आप फ़ायरफ़ॉक्स और क्रोम (या अन्य ब्राउज़र) के बीच स्थिति अंतर कर रहे हैं, तो अपने HTML कोड की जाँच करें ( यह बग रिपोर्ट देखें )

— लेप करें

Answer 3

मैंने ग्लेन मॉस के उत्तर को इस तथ्य के लिए समायोजित किया है कि अतिप्रवाह div पृष्ठ के शीर्ष पर नहीं हो सकता है।

parentDiv.scrollTop(parentDiv.scrollTop() + (innerListItem.position().top - parentDiv.position().top) - (parentDiv.height()/2) + (innerListItem.height()/2)  )

मैं एक उत्तरदायी टेम्पलेट के साथ Google मानचित्र एप्लिकेशन पर इसका उपयोग कर रहा था। रिज़ॉल्यूशन> 800 पीएक्स पर, सूची मैप के बाईं ओर थी। रिज़ॉल्यूशन <800 की सूची मानचित्र के नीचे थी।

Answer 4

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

jQuery.fn.scrollTo = function(elem, speed) {
    var $this = jQuery(this);
    var $this_top = $this.offset().top;
    var $this_bottom = $this_top + $this.height();
    var $elem = jQuery(elem);
    var $elem_top = $elem.offset().top;
    var $elem_bottom = $elem_top + $elem.height();

    if ($elem_top > $this_top && $elem_bottom < $this_bottom) {
        // in view so don't do anything
        return;
    }
    var new_scroll_top;
    if ($elem_top < $this_top) {
        new_scroll_top = {scrollTop: $this.scrollTop() - $this_top + $elem_top};
    } else {
        new_scroll_top = {scrollTop: $elem_bottom - $this_bottom + $this.scrollTop()};
    }
    $this.animate(new_scroll_top, speed === undefined ? 100 : speed);
    return this;
};

Comments

इससे मुझे मदद मिली !! देखें stackoverflow.com/questions/48283932/…

— जीन बी।

Answer 5

मैं अपने जीवन को आसान बनाने के लिए ये 2 कार्य लिखता हूं:

function scrollToTop(elem, parent, speed) {
    var scrollOffset = parent.scrollTop() + elem.offset().top;
    parent.animate({scrollTop:scrollOffset}, speed);
    // parent.scrollTop(scrollOffset, speed);
}

function scrollToCenter(elem, parent, speed) {
    var elOffset = elem.offset().top;
    var elHeight = elem.height();
    var parentViewTop = parent.offset().top;
    var parentHeight = parent.innerHeight();
    var offset;

    if (elHeight >= parentHeight) {
        offset = elOffset;
    } else {
        margin = (parentHeight - elHeight)/2;
        offset = elOffset - margin;
    }

    var scrollOffset = parent.scrollTop() + offset - parentViewTop;

    parent.animate({scrollTop:scrollOffset}, speed);
    // parent.scrollTop(scrollOffset, speed);
}

और उनका उपयोग करें:

scrollToTop($innerListItem, $parentDiv, 200);
// or
scrollToCenter($innerListItem, $parentDiv, 200);

Comments

elem.offset().topस्क्रीन के ऊपर से गणना कर रहा है। मैं चाहता हूं कि मूल तत्व से गणना करें। मैं उसको कैसे करू ?

— संतोष

Answer 6

बहुत लंबे समय तक इसके साथ खेलने के बाद, यह वही है जिसके साथ मैं आया:

    jQuery.fn.scrollTo = function (elem) {
        var b = $(elem);
        this.scrollTop(b.position().top + b.height() - this.height());
    };

और मैं इसे इस तरह से बुलाता हूं

$("#basketListGridHolder").scrollTo('tr[data-uid="' + basketID + '"]');