আমি কীভাবে একটি উপচে পড়া ডিভের মধ্যে কোনও উপাদানটিতে স্ক্রোল করব?

Question

আমার কাছে একটি ডিভের ভিতরে 20 টি তালিকা আইটেম রয়েছে যা একবারে কেবল 5 টি প্রদর্শন করতে পারে। আইটেম # 10 এ স্ক্রোল করার একটি ভাল উপায় কী এবং তারপরে আইটেম # 20? আমি সমস্ত আইটেমের উচ্চতা জানি।

scrollToপ্লাগ-ইন এই আছে, কিন্তু তার উৎস সুপার সত্যিই এটা মধ্যে পেয়ে ছাড়া বুঝতে সহজ নয়। আমি এই প্লাগইনটি ব্যবহার করতে চাই না।

এর আমি একটি ফাংশন যে 2 উপাদান লাগে বলতে দাও $parentDiv, $innerListItem, তন্ন তন্ন $innerListItem.offset().topনা $innerListItem.positon().topআমাকে $ parentDiv জন্য সঠিক scrollTop দেয়।

Comments

আপনার আপডেটের কারণে আমার উত্তর সরানো হয়েছে। তবে আমার উপর বিশ্বাস রাখুন, এর আগে একই রকম মনোভাব পোষণ করে পজিশন এবং মার্জিন ইত্যাদির সাথে প্রচুর ব্রাউজার কুইর্কস রয়েছে ... প্লাগইনটি অনেক সরল রুট এবং কম সময় ব্যয়কারী এবং জিজেপের আগে মাত্র 3 কে ।

— নিক Craver

যাইহোক স্ক্রোলটো প্লাগইন ব্যবহার করুন। এটা কঠিন নয়. $("#container").scrollTo(target, duration, options)। লক্ষ্যমাত্র একটি #anchor। সম্পন্ন.

— রায়ান ম্যাকগেরি

মনে হচ্ছে প্লাগইন ছাড়াই এটি করার জন্য সেখানে জ্ঞান থাকা উচিত। আগামীকাল অসুস্থ উত্স পড়া শুরু করুন

— mkoryak

@ এমকোরিয়াক - জ্ঞান তো আছেই, তবে আপনি যখন ব্রাউজারের কুইর্কের জন্য হিসাব করেন, আপনি মূলত ... .স্ক্রোলটো প্লাগইন দিয়ে শেষ করেন , তবে চাকাটি কেন সর্বদা পুনরায় উদ্ভাবন করবেন?

— নিক Craver

এই প্রোগ্রামটিতে, আপনি সম্ভবত কি .scrollTo বাইরে প্রয়োজন সঠিক উপসেট দিয়ে শেষ করব আজকের । তবে কয়েক মাসের মধ্যে, যখন .scrolTo আই 9, এফএফ 4 এবং ক্রোম 6 এ আপডেট করা হয়েছে, আপনাকে আবার শুরু করতে হবে ... 3 কে এড়াতে খুব কম দাম বলে মনে হচ্ছে।

— উইম

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

এটি আমার নিজস্ব প্লাগইন (তালিকার শীর্ষে উপাদানটি অবস্থান করবে ecially বিশেষত : এর overflow-y : autoসাথে কাজ করতে পারে না overflow-x!):

দ্রষ্টব্য : elemএমন কোনও উপাদানটির এইচটিএমএল নির্বাচনকারী যা পৃষ্ঠাটি স্ক্রোল করা হবে। যেকোনো কিছু 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?? আপনি এটি মোটেও ব্যাখ্যা করবেন না।

— vsync

আপনি fn.scrol এ instead পরিবর্তিত jQuery- এ পরিবর্তিত হলে আপনি আরও ভাল মাইলেজ / অ-দ্বন্দ্ব পেতে পারেন

— ব্যারি কার্লিয়ন

এটির সাথে বৃহত ত্রুটি, আপনার সুযোগটি নেই: $(this).scrollTop($(this).scrollTop() - $(this).offset().top + $(elem, $(this)).offset().top);- শুভেচ্ছা

— লুক স্নোডেন

আপনি পৃষ্ঠাটি এবং উপাদান (যা কিছু ক্ষেত্রে অনেক সুন্দর দেখতে পাবেন পারে) মধ্যে কিছু শীর্ষ মার্জিন ছেড়ে চলে যেতে চান, তাহলে বিয়োগ, উদাহরণস্বরূপ, 10px, মত: $(this).scrollTop() - $(this).offset().top + $(elem).offset().top - 10।

— লিপ

আপনি Firefox এবং Chrome (অথবা অন্যান্য ব্রাউজার) মধ্যে অবস্থান পার্থক্য হয়ে থাকে, তাহলে আপনার HTML কোড (দেখতে পরীক্ষা এই বাগ রিপোর্ট )

— Lepe

Answer 3

পৃষ্ঠের শীর্ষে ওভারফ্লো ডিভ নাও থাকতে পারে বলে অ্যাকাউন্টে আমি গ্লেন মোসের উত্তর সামঞ্জস্য করেছি।

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

আমি এটি একটি প্রতিক্রিয়াশীল টেম্পলেট সহ একটি Google মানচিত্র অ্যাপ্লিকেশন ব্যবহার করছিলাম। রেজোলিউশনে> 800px এ, তালিকাটি মানচিত্রের বাম দিকে ছিল। রেজোলিউশনে <800 তালিকা মানচিত্রের নীচে ছিল।

Answer 4

উপরের উত্তরগুলি ওভারফ্লো উপাদানটির শীর্ষে অভ্যন্তরীণ উপাদানটি অবস্থান করবে যদিও এটি ওভারফ্লো উপাদানটির ভিতরেই রয়েছে view আমি তা চাইনি তাই আমি উপাদানটি দেখলে স্ক্রোলের অবস্থানটি পরিবর্তন না করার জন্য আমি এটি সংশোধন করেছি।

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 + '"]');