ব্রাউজারের ভিউপোর্টের তুলনায় কোনও এলিমেন্টের শীর্ষ অবস্থান কীভাবে পাবেন?

Question

আমি ব্রাউজারের ভিউপোর্ট (ভিউপোর্টে যেখানে পৃষ্ঠাটি প্রদর্শিত হয়, পুরো পৃষ্ঠাটি নয়) এর সাথে সম্পর্কিত কোনও উপাদানের অবস্থান পেতে চাই। এটি কীভাবে জাভাস্ক্রিপ্টে করা যেতে পারে?

অনেক ধন্যবাদ

Comments

আমি মনে করি এই প্রশ্নটি stackoverflow.com/questions/211703/… এর অনুরূপ যার একটি দুর্দান্ত সমাধান রয়েছে।

— জ্যাকব রানেজ

@ জ্যাকবআরঞ্জ, 2013 এ কি "সুন্দর" ছিল?

— আইলিয়ান ওনোফ্রেই

একটি সমাধান গ্রহণ বিবেচনা করুন।

— আইলিয়ান ওনোফ্রেই

Answer 1

বিদ্যমান উত্তরগুলি এখন পুরানো। নেটিভ getBoundingClientRect()পদ্ধতিটি বেশ কিছুক্ষণ ধরে চলেছে, এবং প্রশ্নটি যা জিজ্ঞাসা করে ঠিক তা করে। এছাড়াও এটি সমস্ত ব্রাউজার জুড়ে সমর্থিত (IE 5 সহ, এটি মনে হয়!)

এমডিএন পৃষ্ঠা থেকে :

ফেরত মূল্য TextRectangle বস্তু, যার শুধুমাত্র পাঠযোগ্য রয়েছে, উপরের বাম, ডান এবং নীচের বৈশিষ্ট্য সীমান্ত বাক্স বর্ণনা, পিক্সেলে, শীর্ষ-বাম সাথে আছেন আপেক্ষিক ভিউপোর্ট উপরে বাম ।

আপনি এটির মতো ব্যবহার করুন:

var viewportOffset = el.getBoundingClientRect();
// these are relative to the viewport, i.e. the window
var top = viewportOffset.top;
var left = viewportOffset.left;

Comments

ব্রাউজার জুম (অ্যান্ড্রয়েড ক্রোম) ব্যবহার করার সময় এটি সঠিকভাবে কাজ করতে পারে না। @ ক্রিম থেকে সমাধান ( নীচে দেখুন ) এই ক্ষেত্রে কাজ করে

— দিমিত্রি

বেশিরভাগ ক্ষেত্রেই ভাল তবে এটি ধরে নেওয়া যায় যে উপাদানটি এম্বেড থাকা আইফ্রেমের ভিতরে নেই, তাই না? প্রশ্নটি ব্রাউজারের উইন্ডো সম্পর্কিত সম্পর্কে জিজ্ঞাসা করছে। El.getBoundingClientRect () ব্রাউজার উইন্ডো নয়, iframe এর উইন্ডো সম্পর্কিত আপেক্ষিকৃত ফিরে আসবে।

— cakidnyc

প্রশ্নটি ব্রাউজারের উইন্ডো সম্পর্কিত সম্পর্কে জিজ্ঞাসা করছে।

— দিমিত্রি দ্বোর্নীভকভ

@ ডেনিলসন getBoundingClientRect().topআমার আইই ১১-তে নেই এটি 0 প্রদান করে you

— আরিফ

@ আরিফ: দুঃখিত, তবে আমি আপনার সমস্যাটি পুনরুত্পাদন করতে পারি না। আমি এটি আইই ১১ তে পরীক্ষা করেছিলাম এবং এখনও ফলাফল পেয়েছি: codepen.io/denilsonsa/pen/ypqyXj

— ডেনিলসন সা মিয়া

Answer 2

আমার ক্ষেত্রে, কেবল স্ক্রোলিং সম্পর্কিত নিরাপদ থাকার জন্য, আমি সমীকরণে উইন্ডো.স্ক্রোলটি যুক্ত করেছি:

var element = document.getElementById('myElement');
var topPos = element.getBoundingClientRect().top + window.scrollY;
var leftPos = element.getBoundingClientRect().left + window.scrollX;

এটি আমাকে নথিতে উপাদানটির আসল আপেক্ষিক অবস্থান পেতে দেয়, এমনকি এটি স্ক্রল করা থাকলেও।

Comments

আপনি কি এটি বিয়োগের পরিবর্তে স্ক্রোল অবস্থান যুক্ত করার কথা?

— আইলিয়ান ওনোফ্রেই

আমি উত্তরটি অগ্রাহ্য করেছি তবে এখনও, @ লুলিয়ান ওনোফ্রেই সঠিক। সম্পাদনা করুন।

— পিএমরোটুলে

@ ফ্যাবিও getBoundingClientRect().topআমার আই 11 এ নেই এটি 0 দেয় returns আপনার কোনও সমাধান আছে।

— আরিফ

@ আরিফ window.scrollY || window.pageYOffsetসহায়তায় উন্নতি করতে পারে

— ফ্যাবিয়ান ভন এলার্টস

@ ফ্যাবিয়ানভনলার্টস :)

— আরিফ

Answer 3

সম্পাদনা করুন: পৃষ্ঠা স্ক্রোলিংয়ের জন্য অ্যাকাউন্টে কিছু কোড যুক্ত করুন।

function findPos(id) {
    var node = document.getElementById(id);     
    var curtop = 0;
    var curtopscroll = 0;
    if (node.offsetParent) {
        do {
            curtop += node.offsetTop;
            curtopscroll += node.offsetParent ? node.offsetParent.scrollTop : 0;
        } while (node = node.offsetParent);

        alert(curtop - curtopscroll);
    }
}

আইডি আর্গুমেন্ট হল সেই উপাদানটির আইডি, যার অফসেটটি আপনি চান। একটি quirksmode পোস্ট থেকে অভিযোজিত ।

Comments

আপনার উত্তরের জন্য ধন্যবাদ তবে আমি মনে করি আপনি আমার প্রশ্নকে ভুল বুঝেছেন, আমি কীভাবে পৃষ্ঠার সাথে সম্পর্কিত কোনও উপাদানটির শীর্ষস্থানটি পেতে জানি, আমি যা করার চেষ্টা করছি তা হচ্ছে 'ভিউপোর্ট' (যেমন ব্রাউজার উইন্ডো) এর সাথে সম্পর্কিত অবস্থানটি পেতে , দস্তাবেজটি নয়)

— ওয়ালিদ issিসা

দুঃখিত, আপনার 'ভিউপোর্ট' ব্যবহার আমাকে ছুঁড়ে ফেলেছে। সুতরাং, আপনি বলছেন যে আপনি ব্রাউজার ক্রোমের জন্য অ্যাকাউন্ট করতে চান, অর্থাত্ বুকমার্ক সরঞ্জামদণ্ড, লোকেশন বার ইত্যাদি?

— ডেরেক সুইংলে

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

— ওয়ালিদ আইসা

ঠিক আছে, বুঝেছি. কীভাবে করবেন তা নিশ্চিত নন ... আমি কিছু নিয়ে এলে আমার উত্তরটি সম্পাদনা করবে।

— ডেরেক সুইংলে

আমি কোডটি কিছুটা খারাপ করে দিয়েছি তবে এটি কাজ করে ... অফসেট প্যারেন্ট.স্ক্রোলটপ ব্যবহার করুন

— ডেরেক

Answer 4

var element =  document.querySelector('selector');
var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;

Comments

এটি ভিউপোর্টের চেয়ে নথির শীর্ষ থেকে গণনা করা বলে মনে হচ্ছে

— স্কট লিওনার্ড

Answer 5

আপনি চেষ্টা করতে পারেন:

node.offsetTop - window.scrollY

এটি ভিউপোর্ট মেটা ট্যাগ সংজ্ঞায়িত করে অপেরাতে কাজ করে।

Comments

আমি যদি ডকুমেন্টেশনটি সঠিকভাবে বুঝতে পারি তবেoffsetTop এটি নিকটস্থ অবস্থানের উপাদানটির সাথে সম্পর্কিত। যা পৃষ্ঠার কাঠামোর উপর নির্ভর করে মূল উপাদান হতে পারে বা নাও হতে পারে।

— ডেনিলসন সা মিয়া 9

Answer 6

jQuery এটি বেশ মার্জিতভাবে প্রয়োগ করে। আপনি যদি jQuery এর উত্সটি লক্ষ্য করেন তবে আপনি দেখতে offsetপাবেন এটি মূলত এটি কীভাবে কার্যকর হয়:

var rect = elem.getBoundingClientRect();
var win = elem.ownerDocument.defaultView;

return {
    top: rect.top + win.pageYOffset,
    left: rect.left + win.pageXOffset
};

Answer 7

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

    localToGlobal: function( _el ) {
       var target = _el,
       target_width = target.offsetWidth,
       target_height = target.offsetHeight,
       target_left = target.offsetLeft,
       target_top = target.offsetTop,
       gleft = 0,
       gtop = 0,
       rect = {};

       var moonwalk = function( _parent ) {
        if (!!_parent) {
            gleft += _parent.offsetLeft;
            gtop += _parent.offsetTop;
            moonwalk( _parent.offsetParent );
        } else {
            return rect = {
            top: target.offsetTop + gtop,
            left: target.offsetLeft + gleft,
            bottom: (target.offsetTop + gtop) + target_height,
            right: (target.offsetLeft + gleft) + target_width
            };
        }
    };
        moonwalk( target.offsetParent );
        return rect;
}

Answer 8

function inViewport(element) {
    let bounds = element.getBoundingClientRect();
    let viewWidth = document.documentElement.clientWidth;
    let viewHeight = document.documentElement.clientHeight;

    if (bounds['left'] < 0) return false;
    if (bounds['top'] < 0) return false;
    if (bounds['right'] > viewWidth) return false;
    if (bounds['bottom'] > viewHeight) return false;

    return true;
}

উৎস

Answer 9

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

Comments

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

— ডেরেক সুইংলে

Answer 10

আমি btn1ওয়েব পৃষ্ঠায় একটি উপাদান উপস্থিত রয়েছে বলে ধরে নিচ্ছি এবং jQuery এর অন্তর্ভুক্ত রয়েছে। এটি ক্রোম, ফায়ারফক্স, আইআই> = 9 এবং এজের সমস্ত আধুনিক ব্রাউজার জুড়ে কাজ করেছে। jQuery কেবলমাত্র নথির সাথে সম্পর্কিত অবস্থান নির্ধারণ করতে ব্যবহৃত হচ্ছে।

var screenRelativeTop =  $("#btn1").offset().top - (window.scrollY || 
                                            window.pageYOffset || document.body.scrollTop);

var screenRelativeLeft =  $("#btn1").offset().left - (window.scrollX ||
                                           window.pageXOffset || document.body.scrollLeft);

Comments

jQuery হ'ল জাভাস্ক্রিপ্ট। আমি বিশ্বাস করি আপনি বোঝাতে চেয়েছিলেন "এটি 100% ভ্যানিলা / খাঁটি জেএস নয়" "

— হাঙ্গারস্টার

হ্যাঁ, এটাই আমি বোঝাতে চাইছিলাম

— সুনীল

Answer 11

কখনও কখনও getBoundingClientRect()অবজেক্টের সম্পত্তির মান IE এর জন্য 0 দেখায়। display = 'block'সেক্ষেত্রে আপনাকে উপাদানটির জন্য সেট করতে হবে । অফসেট পেতে আপনি নীচের কোডটি সমস্ত ব্রাউজারের জন্য ব্যবহার করতে পারেন।

JQuery কার্যকারিতা প্রসারিত করুন:

(function($) {
    jQuery.fn.weOffset = function () {
        var de = document.documentElement;
        $(this).css("display", "block");
        var box = $(this).get(0).getBoundingClientRect();
        var top = box.top + window.pageYOffset - de.clientTop;
        var left = box.left + window.pageXOffset - de.clientLeft;
        return { top: top, left: left };
    };
}(jQuery));

ব্যবহার:

var elementOffset = $("#" + elementId).weOffset();