ব্রাউজার উইন্ডো সম্পর্কিত একটি এইচটিএমএল উপাদানের অবস্থান (এক্স, ওয়াই) পুনরুদ্ধার করুন

1562

আমি যেমন এক্স এবং HTML উপাদানের ওয়াই অবস্থান পেতে কিভাবে জানতে চাই imgএবং divব্রাউজার উইন্ডোতে জাভাস্ক্রিপ্ট আপেক্ষিক।

javascript  html  css  dom  position 
— নাবিক
সূত্র
134
কিসের সাথে সম্পর্কিত?
— অ্যান্থনিডাব্লু জোন্স
4
আমি এই 7 টি লাইন কোড ব্যবহার করছিলাম যা সমস্ত ব্রাউজারগুলিতে তাত্পর্য সহ 5,6,7 (আমার কোনও প্রোবোম থাকার কথা মনে নেই ... ডক টাইপ হতে পারে) ... quirksmode.org/js/findpos। এইচটিএমএল এবং আমি এটিকে এত বছর ধরে ব্যবহার করে আসছি। sombody হতে পারে যদি কোনও ত্রুটিগুলি নির্দেশ করতে পারে।
— জয়পাল চন্দ্রন
98
@ অ্যান্থনিডব্লু জোন্স, আমি মনে করি আপনার পেডেন্টিক আনন্দের প্রয়োজন ছিল, তবে এটি স্পষ্টতই যেমন অনির্দিষ্ট সময়ে হয়, ওপি সর্বাধিক সাধারণ কেসকে বোঝায় বা ব্রাউজারের উইন্ডো স্থানাঙ্ককে বোঝায়।
— মোটস
7
@ মোট, না, এটি এতটা স্পষ্ট নয়। অনুমান, সাবজেক্টিভিটি এবং ভুয়া অলঙ্কারগুলি একদিকে ছেড়ে দিন। এটি ভিউপোর্ট বা পৃষ্ঠার শীর্ষে (ওরফে ডকুমেন্ট.ডোকামেন্টএলমেন্ট) এর সাথে সম্পর্কিত হতে পারে।
— আন্দ্রে
15
সর্বাধিক সাধারণের নিকট ডিফল্ট করা অনুমিত নয়, এটি যৌক্তিক অগ্রগতি, সুতরাং এটি উইন্ডোটির সাথে সম্পর্কিত হতে পারে, বা "পৃষ্ঠার শীর্ষ" শব্দটি আপনি এটি স্থাপন করার সাথে সাথে হতে পারে। গেম থিওরিতে এটি একটি স্কেলিং পয়েন্ট নামে পরিচিত হিসাবে রূপান্তরিত হয়। আপনি যখন সর্বাধিক সাধারণ কেসটি বোঝাতে চান না তখন অবশ্যই তা নির্দিষ্ট করে নিন।
— মোটস

উত্তর:

1792

সঠিক পদ্ধতির ব্যবহার হল element.getBoundingClientRect():

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

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

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

প্রদত্ত মানগুলি element.getBoundingClientRect()ভিউপোর্টের সাথে সম্পর্কিত। অন্য উপাদানের তুলনায় আপনার যদি এটির প্রয়োজন হয় তবে কেবল একটি আয়তক্ষেত্রটি অন্য থেকে বিয়োগ করুন:

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

alert('Element is ' + offset + ' vertical pixels from <body>');
— অ্যান্ডি ই
সূত্র
143
জেএস সমন্বয় সম্পর্কিত একটি খুব আকর্ষণীয় নিবন্ধ । এই নিবন্ধটি এসও-তে কোথাও উল্লেখ করা হয়নি, এটি হওয়া উচিত ..
— e2-e4
6
কাজ করে না ... শরীরে 8px মার্জিনের কারণে এটি 8 পিক্সেল উল্লম্ব এবং অনুভূমিকভাবে আউট হয়ে যায়। মিউউ এর সমাধান পুরোপুরি কার্যকর করে। আপনি চাইলে আমার সমস্যাটি প্রদর্শন করার জন্য একটি ছোট পরীক্ষা আছে।
— CpnCrunch
3
প্রকৃতপক্ষে, আমি মনে করি এটি নির্ভর করে যে আপনি আসলে কী সমন্বয় পেতে চান। প্রশ্নটি একটু অস্পষ্ট। আপনার উত্তরটি সঠিক যদি আপনি কেবল ভিউপোর্টের সাথে সম্পর্কিত বা দেহের উপাদানগুলির সাথে তুলনামূলকভাবে সমন্বয়গুলি চান তবে এটি যদি আপনাকে এলিমেন্টের পরম অবস্থান চান এমন ক্ষেত্রে সহায়তা করে না (যা আমি কল্পনা করি যা বেশিরভাগ মানুষ চান) । মেউউয়ের উত্তর আপনাকে দেয় না, যদি না আপনি '-স্ক্রোল লেফট' এবং '-স্ক্রোলটপ' বিট না সরিয়ে থাকেন।
— CpnCrunch
4
@ সিপিএনক্রাঞ্চ: আপনি এখন যা বোঝাতে চাইছেন তা আমি দেখতে পাচ্ছি; আমি বুঝতে পারি নি যে আপনি আমার উত্তরের উত্তর অংশটি উল্লেখ করছেন। যখন শরীরের একটি মার্জিন থাকবে, তখন তার সীমাবদ্ধ বাক্সটি প্রতিটি পাশেই সেই সংখ্যক পিক্সেল দ্বারা অফসেট হবে। সেক্ষেত্রে আপনাকে শরীরের স্থানাঙ্ক থেকে গণিত মার্জিন স্টাইলটি বিয়োগ করতে হবে। এটি লক্ষণীয় যে সিএসএস রিসেটগুলি <body>যদিও মার্জিনটি সরিয়ে দেয় ।
— অ্যান্ডি ই
3
element.getBoundingClientRect().topposition: fixedআইওএস (আইফোন 8) এর কোনও উপাদানের ক্ষেত্রে সঠিক শীর্ষের অফসেটটি ফিরে আসে না যদি এতে কোনও ফোকাসযুক্ত ইনপুট উপাদান থাকে এবং ভার্চুয়াল কীবোর্ডটি স্লাইড হয়ে যায়। উদাহরণস্বরূপ, যদি উইন্ডোটির শীর্ষ থেকে আসল অফসেট 200px হয় তবে এটি 420px হিসাবে রিপোর্ট করবে, যেখানে 220px ভার্চুয়াল কীবোর্ডের উচ্চতা। যদি আপনি উপাদানটির সেট করে থাকেন position: absoluteএবং ঠিক স্থির হিসাবে একই অবস্থানে রাখেন তবে আপনি সঠিক 200px পাবেন। আমি এর কোনও সমাধান জানি না।
— জোনিস এলমারিস
327

উপাদানগুলির জন্য সঠিক অফসেটগুলি পেতে গ্রন্থাগারগুলি কয়েকটি দৈর্ঘ্যে যায়।
এখানে একটি সাধারণ ফাংশন যা আমি চেষ্টা করেছি প্রতিটি পরিস্থিতিতে কাজ করে।

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
var x = getOffset( document.getElementById('yourElId') ).left;
— meouw
সূত্র
14
পরিবর্তন: el = el.parentNode to: el = el.offsetParent; এবং এটি এখন নেস্টেড ইফ্রেমসের জন্য কাজ করছে বলে মনে হচ্ছে ... আমি ভাবছিলাম যা আপনি যা চেয়েছিলেন?
— আদম
4
এই সমাধানটি অসম্পূর্ণ। একটি ডিভের উপর একটি ঘন সীমানা লাগানোর চেষ্টা করুন এবং এটি কয়েকবার বাসা বাঁধেন। ফায়ারফক্সের কোনও সংস্করণে (2-5) এটি সীমানা প্রস্থ (এমনকি মান সম্মতি মোডে) দ্বারা বন্ধ হয়ে যাবে।
— ck_
3
এল.টোটালঅফসেটলফ্ট এবং টোটল অফসেটটপ ফাংশনের মতো এটি করার কোনও পরিষ্কার উপায় নেই? jQuery অবশ্যই এই বিকল্প আছে কিন্তু এটি লজ্জাজনক এর কোন অফিসিয়াল পদ্ধতি নেই, আমাদের কি DOM4 অপেক্ষা করতে হবে? আমি একটি এইচটিএমএল 5 ক্যানভাস অ্যাপ্লিকেশন তৈরি করছি, তাই আমি মনে করি সর্বোত্তম সমাধান হ'ল একটি আইফ্রেমে ক্যানভাস উপাদান সন্নিবেশ করানো যাতে আমি যখন এলিমেন্টে ক্লিক করি তখন ক্লায়েন্টএক্স এবং ক্লায়েন্টওয়াইয়ের সাথে সত্যিকারের সমন্বয় পেতে পারি।
— ব্যাপটেক্স
1
সুতরাং, অ্যাডাম এবং মিউউ, আপনি কি প্রথম কোড ব্লকটি ভুল বলে চলেছেন? তাহলে কেন পুরোপুরি অপসারণ করবেন না? (এই প্রশ্নটি বেশ কয়েক বছর ধরে বেশ কিছু দর্শকের কাছে দেখা গেছে; যদি ভুল হয় তবে জিনিসগুলি মুছে
— আরজান
2
@ ব্যাপটেক্স: আমি জানি এটি একটি দেরিতে জবাব, তবে আমি আপনার মন্তব্যটি খুব শীঘ্রই দেখতে পেলাম না। আরও মান সম্মত বিকল্পের জন্য নীচে আমার উত্তরটি দেখুন - আপনার এমনকি ফ্যালব্যাক কোডেরও দরকার নেই, যেহেতু ব্রাউজারগুলি দীর্ঘ সময় ধরে এটি সমর্থন করে।
— অ্যান্ডি ই
242

এটি আমার পক্ষে কাজ করেছে (সর্বোচ্চ ভোট দেওয়া উত্তর থেকে সংশোধিত):

function getOffset(el) {
  const rect = el.getBoundingClientRect();
  return {
    left: rect.left + window.scrollX,
    top: rect.top + window.scrollY
  };
}

এটি ব্যবহার করে আমরা কল করতে পারি

getOffset(element).left

অথবা

getOffset(element).top
— অ্যাডাম গ্রান্ট
সূত্র
1
divযার উপাদানটি সিএসএস ব্যবহার করে কেন্দ্রস্থলে স্থাপন করা হয় কেবল তখনই এই সমাধানটি আমার পক্ষে কার্যকর হয় top:50%, left:50%; transform:translate(-50%, -50%);... দুর্দান্ত। @ স্কটবিগস প্রশ্নটির সাথে একমত হোন। যৌক্তিক হ'ল সরলতার সন্ধান করা।
— nelek
3
সম্ভবত এটির কোনও বিজয়ী অ্যান্ডি ই এর সমাধানের মতো কারণ হতে পারে না, তবে পুরানো ব্রাউজারগুলিতে কাজ করে না <
— আই
getBoundingClientRect আমার পারফরম্যান্সের চার্টগুলিতে একটি বিশাল পুনর্নির্মাণ স্পাইকের কারণ ঘটায়
— ফ্রেমবার্ট
1
আপনি সংজ্ঞায়িত করা উচিত rectব্যবহার var, letঅথবা const। অন্যথায়, এটি হিসাবে সংজ্ঞায়িত করা হয় window.rect।
— hev1
2
left: rect.left + window.scrollX + (rect.width / 2), top: rect.top + window.scrollY + (rect.height / 2)একটি মৌলের মধ্যবর্তী অবস্থানটি ফিরিয়ে দেবে
— অভীষাক
94

আপনি যদি এটি কেবল জাভাস্ক্রিপ্টে করতে চান তবে এখানে কিছু জন লাইনার ব্যবহার করছেনgetBoundingClientRect()

window.scrollY + document.querySelector('#elementId').getBoundingClientRect().top // Y

window.scrollX + document.querySelector('#elementId').getBoundingClientRect().left // X

প্রথম লাইনটি offsetTopডকুমেন্টের তুলনায় ওয়াই বলবে return দ্বিতীয় লাইনটি offsetLeftডকুমেন্টের তুলনায় এক্স বলবে return

getBoundingClientRect() একটি জাভাস্ক্রিপ্ট ফাংশন যা উইন্ডোটির ভিউপোর্টের সাথে সম্পর্কিত উপাদানটির অবস্থান ফেরত দেয়।

— মোস্তকিম কে
সূত্র
2
এটি সমাধান হওয়া উচিত। এখানে কোনও দীর্ঘ কোড বিএস নেই, এটি বোধগম্য এবং এটির যথাযথ!
— ই আলেক্সিস এমটি
2
উপাদানটি যদি কোনও স্ক্রোলযোগ্য উপাদানগুলির মধ্যে থাকে তবে কী হবে? এটি করার একমাত্র উপায় হ'ল সমস্ত উত্তর উপাদানগুলির অফসেটটপ, অন্য উত্তরগুলির মতোই শীর্ষগুলি যোগ করা
— দিমিত্রি পিসারেভ
দিমিত্রি যেমন বলেছেন, এটি ভুল এবং খুব ত্রুটিযুক্ত। এটির মতো বেশি ভোট হওয়া উচিত নয়। এটি সবসময় একটি স্ক্রোলযোগ্য উপাদানেও থাকবে কারণ ডকুমেন্টটি নিজেই স্ক্রোল করা যায়। অন্য কথায়, যতক্ষণ না পুরো ডকুমেন্টটি ভিউপোর্টে ফিট করে না, ব্যবহারকারী সর্বদা মূল উইন্ডোটি স্ক্রোল করে থাকলে এটি সর্বদা ভুল হবে।
— লেভ
46

বেশিরভাগ ব্রাউজারে এইচটিএমএল উপাদানগুলির মধ্যে রয়েছে: -

offsetLeft
offsetTop

এগুলি বিন্যাসের নিকটতম পিতামাতার সাথে সম্পর্কিত উপাদানের অবস্থান নির্দিষ্ট করে। এই পিতামাতাকে প্রায়শই অফসেট পিতৃ সম্পত্তি হিসাবে অ্যাক্সেস করা যায়।

আইই এবং এফএফ 3 রয়েছে

clientLeft
clientTop

এই বৈশিষ্ট্যগুলি কম সাধারণ, তারা তার পিতামাতার ক্লায়েন্ট ক্ষেত্রের সাথে একটি উপাদান অবস্থান নির্দিষ্ট করে (প্যাডযুক্ত অঞ্চল ক্লায়েন্টের অংশ তবে সীমানা এবং মার্জিন নয়)।

— AnthonyWJones
সূত্র
36

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

নীচে দেওয়া কোডটি ব্যবহার করে দেখুন (এটি এফএফ 2 এর জন্য পরীক্ষা করা হয়):


var getAbsPosition = function(el){
    var el2 = el;
    var curtop = 0;
    var curleft = 0;
    if (document.getElementById || document.all) {
        do  {
            curleft += el.offsetLeft-el.scrollLeft;
            curtop += el.offsetTop-el.scrollTop;
            el = el.offsetParent;
            el2 = el2.parentNode;
            while (el2 != el) {
                curleft -= el2.scrollLeft;
                curtop -= el2.scrollTop;
                el2 = el2.parentNode;
            }
        } while (el.offsetParent);

    } else if (document.layers) {
        curtop += el.y;
        curleft += el.x;
    }
    return [curtop, curleft];
};
— রেফিক আয়াতা
সূত্র
1
অন্যান্য সমাধান হিসাবে যেমন এফএফ 24.4 এর সাথেও উপরের কোডটি কাজ করে না যখন সীমানা প্রস্থগুলি অবস্থানের বিন্যাসের অংশ হিসাবে উপস্থিত থাকে।
— ছিনতাই
আপনি জীবন রক্ষাকারী আমি এখনই বেশ কিছু গভীর জিডব্লুটি বাগের মধ্য দিয়ে কাজ করছি এবং এটিকে জেএসএনআই পদ্ধতিতে ছুঁড়ে ফেললে আমার সমস্ত সমস্যার সমাধান হয় !!
— বাইর্ন
35

Element.prototypeযে কোনও উপাদানটির শীর্ষ / বাম পেতে আপনি দুটি বৈশিষ্ট্য যুক্ত করতে পারেন ।

Object.defineProperty( Element.prototype, 'documentOffsetTop', {
    get: function () { 
        return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop : 0 );
    }
} );

Object.defineProperty( Element.prototype, 'documentOffsetLeft', {
    get: function () { 
        return this.offsetLeft + ( this.offsetParent ? this.offsetParent.documentOffsetLeft : 0 );
    }
} );

এটিকে এভাবে বলা হয়:

var x = document.getElementById( 'myDiv' ).documentOffsetLeft;

এখানে একটি ডেমো jQuery এর মধ্যে ফলাফল তুলনা নেই offset().topএবং .left: http://jsfiddle.net/ThinkingStiff/3G7EZ/

— ThinkingStiff
সূত্র
14
সংশোধন Element.prototypeকরা সাধারণত একটি খারাপ ধারণা হিসাবে বিবেচিত হয় । এটি কোড বজায় রাখা সত্যিই কঠিন বাড়ে। এছাড়াও, এই কোডটি স্ক্রোলিংয়ের জন্য অ্যাকাউন্ট করে না।
— জ্যারেড ফোর্সথ
23

পৃষ্ঠার তুলনায় দক্ষতার সাথে অবস্থান এবং পুনরাবৃত্ত ফাংশনটি ব্যবহার না করে পুনরুদ্ধার করতে: (আইআইও অন্তর্ভুক্ত রয়েছে)

var element = document.getElementById('elementId'); //replace elementId with your element's Id.
var rect = element.getBoundingClientRect();
var elementLeft,elementTop; //x and y
var scrollTop = document.documentElement.scrollTop?
                document.documentElement.scrollTop:document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft?                   
                 document.documentElement.scrollLeft:document.body.scrollLeft;
elementTop = rect.top+scrollTop;
elementLeft = rect.left+scrollLeft;
— আবদুল রহিম হাদ্দাদ
সূত্র
সমস্ত গুরুত্বপূর্ণ স্ক্রোলটপ / স্ক্রোললিফ্ট সহ এই উত্তরটি কিছুটা আরও সঠিক করে তোলে।
— স্কানলিফ
19

এটির মতো কীভাবে, উপাদানটির আইডি পাস করে এবং এটি বাম বা উপরে ফিরে আসে, আমরা সেগুলিও একত্রিত করতে পারি:

1) বাম খুঁজে

function findLeft(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return rec.left + window.scrollX;
} //call it like findLeft('#header');

2) শীর্ষ সন্ধান করুন

function findTop(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return rec.top + window.scrollY;
} //call it like findTop('#header');

বা 3) বাম এবং উপরে একসাথে সন্ধান করুন

function findTopLeft(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return {top: rec.top + window.scrollY, left: rec.left + window.scrollX};
} //call it like findTopLeft('#header');
— আলিরেজা
সূত্র
16

ব্রাউজার-ইন্ডিপেন্ডেন্ট ফ্যাশনে এই জাতীয় তথ্য (এবং আরও অনেক কিছু!) ফেরত দেওয়ার জন্য রয়েছে এমন জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক ব্যবহার করে আপনার আরও ভাল পরিবেশিত হতে পারে। এখানে কয়েকটি দেওয়া হল:

এই ফ্রেমওয়ার্কগুলির সাহায্যে আপনি এমন কিছু করতে পারেন: $('id-of-img').top চিত্রটির y- পিক্সেল স্থানাঙ্ক পেতে।

— শালম ক্রিমার
সূত্র
2
@ কোস্টা তারা সকলেই এই ধরণের ফাংশন ব্যবহার করে, যদিও এটি একটি বিকশিত ক্ষেত্র, কারণ বিভিন্ন ব্রাউজার স্পেসিফিকেশনের সাথে আলাদাভাবে অনুসরন করে। কোডের অনেক কিছুই ভুল হয়ে যাওয়ার বিষয়গুলিকে "ফিক্সিং" করে। আপনার সত্যিকারের উত্স কোডটি দেখতে হবে।
— শালম ক্রিমার 27'13
18
@ স্ক্রাইমার: jQuery এবং YUI ফ্রেমওয়ার্ক নয় !!! এগুলি গ্রন্থাগার ! এটি একই না. Jquery.com উদ্ধৃত করে : "jQuery একটি দ্রুত, ছোট এবং বৈশিষ্ট্যযুক্ত জাভাস্ক্রিপ্ট লাইব্রেরি ।" ইউইলিবারিয়ান ডট কমকে উদ্ধৃত করে (আপনি ইউআরএলে "ম্যাজিক" শব্দটিও দেখতে পাচ্ছেন ...): "YUI একটি নিখরচায়, মুক্ত উত্স জাভাস্ক্রিপ্ট এবং সিএসএস লাইব্রেরি সমৃদ্ধ ইন্টারেক্টিভ ওয়েব অ্যাপ্লিকেশন তৈরির জন্য।"
— Sk8erPeter
29
সুতরাং আপনার এই সহজ কাজের জন্য বিশাল গ্রন্থাগার ব্যবহার করা উচিত? জরুরী না. আমি ঘৃণা করি যে যতবার আমি js এর সাথে কিছু করতে চাই, আমি এই jQuery সমাধানগুলি পাই। jQuery জেএস নয়!
— জোব্বার ওপ্ট্যাট
1
@ অপট্যাটজবার আমি সম্মত ... জ্যাকুয়ারি জাভাস্ক্রিপ্ট নয়। এটি জাভাস্ক্রিপ্টের উপর নির্ভর করে তবে এটির সম্পূর্ণ আলাদা একটি প্রোগ্রামিং ভাষা।
— নিক ম্যানিং
5
@ নিকম্যানিং এটি কোনও নতুন ভাষা নয়, এটি ডিওএমের জন্য এটি একটি বিমূর্ত স্তর যা সরাসরি আপনার কোডের সাথে সামঞ্জস্যতা এবং পারফরম্যান্সের কাজ লিখতে পারা যায়। আপনি যদি jQuery ব্যবহার না করেন তবে আপনার কোনওভাবে কিছু বিমূর্ত স্তর ব্যবহার করা উচিত।
— জিনম্যান
15

jQuery .offset () প্রথম উপাদানটির বর্তমান স্থানাঙ্কগুলি পাবে, বা নথির সাথে সম্পর্কিত, প্রতিটি উপাদানগুলির স্থানাঙ্কগুলি মিলবে elements

— akauppi
সূত্র
কিছু কারণে এটি অন্যান্য ব্রাউজারগুলির তুলনায় আইইতে একই ফলাফল দিচ্ছে না। আমি মনে করি যে আইইতে এটি উইন্ডোটির সাথে তুলনামূলক অবস্থান দিচ্ছে, সুতরাং আপনি যদি স্ক্রোল করেন তবে আপনি অন্যের তুলনায় আইইতে বিভিন্ন ফলাফল পাবেন
— আব্দুল রহিম হাদ্দাদ
1
অফসেট () কমপক্ষে অ্যান্ড্রয়েড ক্রোমে জুম দ্বারা বিভ্রান্ত, তাই এটি অকেজো। stackoverflow.com/a/11396681/1691517 জুম-সহনশীল উপায় দেখায়।
— টিমো কাহকেনেন
10

আমি @ মেউউয়ের উত্তর নিয়েছি, ক্লায়েন্ট লেফটে যুক্ত হয়েছে যা সীমান্তের জন্য অনুমতি দেয় এবং তারপরে তিনটি সংস্করণ তৈরি করেছে:

getAbsolveOffsetFromBody - @ meouw এর অনুরূপ, এটি নথির বডি বা এইচটিএমএল উপাদানটির সাথে সম্পর্কিত (পরস্পর মোডের উপর নির্ভর করে) পরম অবস্থান লাভ করে

getAbsolveOffsetFromGivenElement - প্রদত্ত উপাদানটির (আপেক্ষিকএল) তুলনায় নিখুঁত অবস্থান প্রদান করে। নোট করুন যে প্রদত্ত উপাদানটিতে অবশ্যই এল এলিম থাকতে হবে বা এটি getAbsolveOffsetFromBody এর মতো আচরণ করবে। যদি আপনার কাছে অন্য (জ্ঞাত) উপাদানগুলির মধ্যে দুটি উপাদান থাকে (বিকল্পভাবে নোড ট্রি পর্যন্ত কয়েকটি নোড) থাকে এবং সেগুলি একই অবস্থান তৈরি করতে চান তবে এটি কার্যকর।

getAbsolveOffsetFromRelative - পজিশন সহ প্রথম অভিভাবক উপাদানের তুলনায় নিখুঁত অবস্থান প্রদান করে: আপেক্ষিক। এটি একই কারণে getAbsolveOffsetFromGivenElement এর মতো তবে এটি কেবল প্রথম ম্যাচের উপাদান হিসাবে চলে যাবে।

getAbsoluteOffsetFromBody = function( el )
{   // finds the offset of el from the body or html element
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) )
    {
        _x += el.offsetLeft - el.scrollLeft + el.clientLeft;
        _y += el.offsetTop - el.scrollTop + el.clientTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}

getAbsoluteOffsetFromGivenElement = function( el, relativeEl )
{   // finds the offset of el from relativeEl
    var _x = 0;
    var _y = 0;
    while( el && el != relativeEl && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) )
    {
        _x += el.offsetLeft - el.scrollLeft + el.clientLeft;
        _y += el.offsetTop - el.scrollTop + el.clientTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}

getAbsoluteOffsetFromRelative = function( el )
{   // finds the offset of el from the first parent with position: relative
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) )
    {
        _x += el.offsetLeft - el.scrollLeft + el.clientLeft;
        _y += el.offsetTop - el.scrollTop + el.clientTop;
        el = el.offsetParent;
        if (el != null)
        {
            if (getComputedStyle !== 'undefined')
                valString = getComputedStyle(el, null).getPropertyValue('position');
            else
                valString = el.currentStyle['position'];
            if (valString === "relative")
                el = null;
        }
    }
    return { top: _y, left: _x };
}

আপনার যদি এখনও সমস্যা হয়, বিশেষত স্ক্রোলিং সম্পর্কিত, আপনি http://www.greywyvern.com/?post=331 দেখার চেষ্টা করতে পারেন - আমি getStyle এ প্রশ্নবোধক কোডের কমপক্ষে এক টুকরো লক্ষ্য করেছি যা অনুমান করা উচিত যে ব্রাউজারগুলি আচরণ করবে , কিন্তু বাকিটা মোটেও পরীক্ষা করে দেখিনি।

— জেমস কার্লাইল-ক্লার্ক
সূত্র
আকর্ষণীয় ... তবে এজ getAbsolveOffsetFromBody (এলিমেন্ট) এ। টপটি আমি স্ক্রোল করার সাথে সাথে আলাদা মান দেয়, ক্রোমে এটি স্ক্রোল করার সাথে সাথে এটি সামঞ্জস্য বজায় রাখে। দেখে মনে হচ্ছে এজটি স্ক্রোল অবস্থানের সাথে সামঞ্জস্য করছে। যখন উপাদানটি দেখার বাইরে স্ক্রোল করা হয় তখন আমি একটি নেতিবাচক মান পাই।
— নর্মান
getAbsolveOffsetFromRelative আমার দিনটি তৈরি করেছে, আমাকে বুটস্ট্র্যাপের জাভাস্ক্রিপ্ট ছাড়াই বুটস্ট্র্যাপ টুলটিপ পুনরুত্পাদন করতে হয়েছিল, এটি আমাকে অনেক সহায়তা করেছিল।
— নলিওরন
যদি মিউউ তাদের ব্যবহারকারীর নাম পরিবর্তন করে থাকে তবে উত্তরের লিঙ্ক: stackoverflow.com/a/442474/3654837 । (আমি এই পুরাতন
— থ্রেডটিকে
8

jQuery ব্যবহার করা হলে, মাত্রাগুলি প্লাগইনটি দুর্দান্ত এবং আপনাকে যা চান ঠিক তা নির্দিষ্ট করতে দেয়।

যেমন

আপেক্ষিক অবস্থান, নিখুঁত অবস্থান, প্যাডিং ছাড়াই নিখুঁত অবস্থান, প্যাডিং সহ ...

এটি চলতে থাকে, কেবল এটির বলে দিন যে আপনি এটির সাথে অনেক কিছু করতে পারেন।

এছাড়াও jQuery ব্যবহারের বোনাস হ'ল এটি হ'ল ফাইলের আকার এবং সহজ ব্যবহার, আপনি এটি পরে আর জাভাস্ক্রিপ্টে ফিরে যেতে পারবেন না।

— John_
সূত্র
8

এটি আমি তৈরি করতে সক্ষম হলাম সেরা কোড (jQuery এর অফসেট () এর বিপরীতে iframes হিসাবে কাজ করে)। দেখে মনে হচ্ছে ওয়েবকিটের কিছুটা আলাদা আচরণ রয়েছে।

মিউউয়ের মন্তব্যের ভিত্তিতে:

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        // chrome/safari
        if ($.browser.webkit) {
            el = el.parentNode;
        } else {
            // firefox/IE
            el = el.offsetParent;
        }
    }
    return { top: _y, left: _x };
}
— রন রিটার
সূত্র
নোট করুন যে আপনাকে jQueryব্যবহার করতে হবে $.browser.webkit; navigator.userAgentখাঁটি দিয়ে একই কাজ করার জন্য আপনার চারপাশে খেলতে হবে JavaScript।
— এসপি
2
b। ব্রাউজার আর jQuery এর সর্বশেষ সংস্করণে উপলব্ধ নয়
— Gus
দুর্ভাগ্যক্রমে এমনকি এফএফ 24.4 এর সাথেও যখন উপরের কোডটি পজিশনিং বিন্যাসের অংশ হিসাবে সীমানা প্রশস্ততা উপস্থিত থাকে তখন কাজ করে না।
— ছিনতাই
8

আপনি যদি jQuery ব্যবহার করেন তবে এটি একটি সহজ সমাধান হতে পারে:

<script>
  var el = $("#element");
  var position = el.position();
  console.log( "left: " + position.left + ", top: " + position.top );
</script>
— অ্যাডাম বুস্তানি
সূত্র
8

ছোট এবং ছোট মধ্যে পার্থক্য

function getPosition( el ) {
    var x = 0;
    var y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
    x += el.offsetLeft - el.scrollLeft;
    y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
    }
    return { top: y, left: x };
}

একটি উদাহরণ স্থানাঙ্ক দেখুন: http://javascript.info/tutorial/coordinates

— KingRider
সূত্র
এটি দুর্ভাগ্যক্রমে কোনও আধুনিক এইচটিএমএল ডকুমেন্টের মধ্যে থাকা সমস্ত উপাদানগুলির পক্ষে কাজ করে না। এম্বেড থাকা <svg>উপাদানগুলির উদাহরণস্বরূপ offsetLeft, নেই offsetTop, এবং offsetParentবৈশিষ্ট্যগুলি।
— জোনাথন ইউনিস
এটা ঠিক DIVবা IMGনা SVG। "উদাহরণের স্থানাঙ্কগুলি দেখুন"? আপনি জানতে পারেন অবজেক্ট এসভিজি হ'ল পজিশন কল getOffsetRect , চেষ্টা করুন এবং অবজেক্টের কাজের উপর নির্ভরশীল।
— কিংআাইডার
7

আমি যে পরিচ্ছন্ন পদ্ধতির সন্ধান পেয়েছি তা হ'ল jQuery এর ব্যবহৃত কৌশলটির একটি সরলীকৃত সংস্করণ offset। এটির সাথে শুরু হওয়া অন্যান্য উত্তরগুলির মতো getBoundingClientRect; এরপরে এটি স্ক্রোল অবস্থানের জন্য অ্যাডজাস্ট করতে windowএবং documentElementপাশাপাশি মার্জিনের মতো জিনিস body(প্রায়শই ডিফল্ট) ব্যবহার করে। 

var rect = el.getBoundingClientRect();
var docEl = document.documentElement;

var rectTop = rect.top + window.pageYOffset - docEl.clientTop;
var rectLeft = rect.left + window.pageXOffset - docEl.clientLeft;

কোড স্নিপেট দেখান

— জেমস মন্টাগেন
সূত্র
6

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

পরিস্থিতি :
একটি এইচটিএমএল 5 পৃষ্ঠায় আমার একটি মেনু ছিল যা শিরোনামের ভিতরে একটি এনএভি উপাদান ছিল (দ্য শিরোনামটি নয় তবে অন্য একটি উপাদানের শিরোনাম)।
আমি একবার নেভিগেশন শীর্ষে আটকে থাকতে চেয়েছিলাম যখন এটি ব্যবহারকারীর কাছে স্ক্রোল হয়ে যায় তবে এর আগে শিরোনামটি ছিল পরম অবস্থানযুক্ত (যাতে আমি এটি সামান্য কিছু দিয়ে ওভারলে করতে পারি)।
উপরের সমাধানগুলি কখনই পরিবর্তন ঘটাতে পারে নি কারণ। অফসেটটপ পরিবর্তিত হচ্ছিল না কারণ এটি একটি নিখুঁত অবস্থানযুক্ত উপাদান। অতিরিক্তভাবে .scrolTop বৈশিষ্ট্যটি ছিল শীর্ষ সর্বাধিক উপাদানগুলির শীর্ষস্থানীয় ... এটি 0 এবং সর্বদা 0 হবে to
এই দুটি (এবং getBoundingClientRect ফলাফলের সাথে একই) ব্যবহার করে আমি যে পরীক্ষা করেছি তা আমাকে বলবে না যে নেভিগেশন বারের শীর্ষটি কখনই দেখা পাতার শীর্ষে স্ক্রোল করে (আবার কনসোলে উল্লিখিত হিসাবে, তারা কেবল একই স্ক্রল করার সময় একই সংখ্যা থেকে গেছে) ঘটেছে)।

সমাধান
আমার জন্য সমাধানটি ব্যবহার করছিল

window.visualViewport.pageTop

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

সম্ভবত অযৌক্তিকভাবে বলা বাহুল্য, যে কোনও সময় আমি স্ক্রোলিংয়ের সাথে মোকাবিলা করছি আমি আশা করি এই সমাধানটি স্ক্রোল হওয়া উপাদানগুলির গতিবেগের অগ্রগতিতে সাড়া দেওয়ার জন্য ব্যবহার করব।
আশা করি এটি অন্য কাউকে সাহায্য করবে।
গুরুত্বপূর্ণ দ্রষ্টব্য: এটি বর্তমানে ক্রোম এবং অপেরাতে কাজ করছে এবং স্পষ্টভাবে ফায়ারফক্সে (6-2018) কাজ করছে না বলে মনে হচ্ছে ... যতক্ষণ না ফায়ারফক্স ভিজ্যুয়ালভিউপোর্ট সমর্থন করে আমি এই পদ্ধতিটি ব্যবহার না করার প্রস্তাব দিই, (এবং আমি আশা করি তারা শীঘ্রই এটি করবে ... এটি অনেক কিছু করে বাকী তুলনায় আরও জ্ঞান)।


আপডেট:
এই সমাধান সম্পর্কিত একটি নোট।
যদিও আমি এখনও আবিষ্কার করেছি যা আমি সেই পরিস্থিতিতে খুব মূল্যবান বলে আবিষ্কার করেছি যে "... প্রোগ্রামগুলিতে স্ক্রোলড থাকা উপাদানগুলির গতিবেগে প্রোগ্রামিয়ালি সাড়া দেয়।" প্রযোজ্য। আমার যে সমস্যাটি ছিল তার আরও ভাল সমাধান হ'ল সিএসএস ব্যবহার করে অবস্থান নির্ধারণ করা : স্টিকিউপাদান উপর। স্টিকি ব্যবহার করে জাভাস্ক্রিপ্ট ব্যবহার না করে আপনি শীর্ষে থাকতে পারেন (দ্রষ্টব্য: এমন সময় রয়েছে যা উপাদানটিকে স্থির করে দেওয়ার মতো কার্যকরভাবে কাজ করবে না তবে বেশিরভাগ ব্যবহারের জন্য স্টিকি পদ্ধতির সম্ভাবনা আরও উন্নত হবে)

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

  let bodyElement = document.getElementsByTagName('body')[0];
  let elementToTrack = bodyElement.querySelector('.trackme');
  trackedObjPos = elementToTrack.getBoundingClientRect().top;
  if(trackedObjPos > 264)
  {
    bodyElement.style.cssText = '';
  }

আশা করি এই উত্তরটি এখন আরও ব্যাপকভাবে কার্যকর হবে।

— MER
সূত্র
উত্তরগুলি বাছাই করতে আপনি যখন সক্রিয় ক্লিক করেন তখন এটি অনেকগুলি জবাবের শীর্ষে থাকতে পারে
— লুচি
@ লুচি: ডি আমি মনে করি আমি এই লেখাটি শীর্ষে সরিয়ে ফেলতে পারব ... যদিও আমি কেবল এটির উপরে আবার ঘটলাম এবং বুঝতে পেরেছিলাম যে আমি আমার নিজের সমস্যার আরও ভাল সমাধান খুঁজে পাব ... যদিও আমার উত্তরটি আরও একটি আরও সম্পূর্ণ উত্তরের পাদদেশ নোট। আমার সন্দেহ হয় যে আমার প্রয়োজনীয়তাগুলি সম্ভবত এত সাধারণ ছিল না যে অন্যান্য উত্তরগুলি আমার পক্ষে কাজ করে না?
— এমইআর
1
আমি যাইহোক আপনার উত্তরটির প্রশংসা করি, এটি কেবল আপনাকে জানাতেই হয়েছিল যে, যে কেউ ইচ্ছুক হবে সে সম্পর্কে আপনি সচেতন হবেন যে আপনি নতুন কিছু লিখেছেন। আপনি একা নন ....
— লুচি
5

আমি এটি এটি করেছি তাই এটি পুরানো ব্রাউজারগুলির সাথে ক্রস-সামঞ্জস্যপূর্ণ ছিল।

// For really old browser's or incompatible ones
    function getOffsetSum(elem) {
        var top = 0,
            left = 0,
            bottom = 0,
            right = 0

         var width = elem.offsetWidth;
         var height = elem.offsetHeight;

        while (elem) {
            top += elem.offsetTop;
            left += elem.offsetLeft;
            elem = elem.offsetParent;
        }

         right = left + width;
         bottom = top + height;

        return {
            top: top,
            left: left,
            bottom: bottom,
            right: right,
        }
    }

    function getOffsetRect(elem) {
        var box = elem.getBoundingClientRect();

        var body = document.body;
        var docElem = document.documentElement;

        var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
        var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;

        var clientTop = docElem.clientTop;
        var clientLeft = docElem.clientLeft;


        var top = box.top + scrollTop - clientTop;
        var left = box.left + scrollLeft - clientLeft;
        var bottom = top + (box.bottom - box.top);
        var right = left + (box.right - box.left);

        return {
            top: Math.round(top),
            left: Math.round(left),
            bottom: Math.round(bottom),
            right: Math.round(right),
        }
    }

    function getOffset(elem) {
        if (elem) {
            if (elem.getBoundingClientRect) {
                return getOffsetRect(elem);
            } else { // old browser
                return getOffsetSum(elem);
            }
        } else
            return null;
    }

এখানে জাভাস্ক্রিপ্টের স্থানাঙ্ক সম্পর্কে আরও জানুন: http://javascript.info/tutorial/coordinates

— বোজন কসনেমান
সূত্র
4

কোনও উপাদানটির মোট অফসেট পেতে, আপনি সমস্ত অভিভাবক অফসেটগুলি পুনরাবৃত্তভাবে যোগ করতে পারেন:

function getParentOffsets(el): number {
if (el.offsetParent) {
    return el.offsetParent.offsetTop + getParentOffset(el.offsetParent);
} else {
    return 0;
}
}

এই ইউটিলিটি ফাংশনটির সাথে একটি ডোম উপাদানটির মোট শীর্ষ অফসেটটি হ'ল: 

el.offsetTop + getParentOffsets(el);
— কেভিন কে।
সূত্র
3 
/**
 *
 * @param {HTMLElement} el
 * @return {{top: number, left: number}}
 */
function getDocumentOffsetPosition(el) {
    var position = {
        top: el.offsetTop,
        left: el.offsetLeft
    };
    if (el.offsetParent) {
        var parentPosition = getDocumentOffsetPosition(el.offsetParent);
        position.top += parentPosition.top;
        position.left += parentPosition.left;
    }
    return position;
}

উত্তরের জন্য থিংকিংস্টিফকে ধন্যবাদ , এটি এটির অন্য একটি সংস্করণ।

— ভ্যান কুইট
সূত্র
2

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

জাভাস্ক্রিপ্ট:

function setLinkPosition(clientId){
var bodyRect = document.body.getBoundingClientRect(),
elemRect = clientId.getBoundingClientRect(),
offset   = elemRect.top - bodyRect.top;
offset   = offset + 20;
$('#serviceLineModal').css("top", offset);

}

আমার মডেল কোড:

<div id="serviceLineModal" class="modal hide fade add-absolute-position" data-backdrop="static" 
 tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="top:50%;">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    <h3 id="myModalLabel">Modal header</h3>
</div>

<div class="modal-body">
    <t:zone t:id="modalZone" id="modalZone">
        <p>You selected service line number: ${serviceLineNumberSelected}</p>
    </t:zone>
</div>

<div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <!-- <button class="btn btn-primary">Save changes</button> -->
</div>

লুপের লিঙ্ক:

<t:loop source="servicesToDisplay" value="service" encoder="encoder">
<tr style="border-right: 1px solid black;">       
    <td style="white-space:nowrap;" class="add-padding-left-and-right no-border"> 
        <a t:type="eventLink" t:event="serviceLineNumberSelected" t:context="service.serviceLineNumber" 
            t:zone="pageZone" t:clientId="modalLink${service.serviceLineNumber}"
            onmouseover="setLinkPosition(this);">
            <i class="icon-chevron-down"></i> <!-- ${service.serviceLineNumber} -->
        </a>
    </td>

এবং পৃষ্ঠা শ্রেণিতে জাভা কোড:

void onServiceLineNumberSelected(String number){
    checkForNullSession();
    serviceLineNumberSelected = number;
    addOpenServiceLineDialogCommand();
    ajaxResponseRenderer.addRender(modalZone);
}

protected void addOpenServiceLineDialogCommand() {
    ajaxResponseRenderer.addCallback(new JavaScriptCallback() {
        @Override
        public void run(JavaScriptSupport javascriptSupport) {
            javascriptSupport.addScript("$('#serviceLineModal').modal('show');");
        }
    });
}

আশা করি এটি কাউকে সহায়তা করে, এই পোস্টটি সাহায্য করেছে।

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

অনেক গবেষণা এবং পরীক্ষার পরে এটি কাজ করে বলে মনে হচ্ছে

function getPosition(e) {
    var isNotFirefox = (navigator.userAgent.toLowerCase().indexOf('firefox') == -1);
    var x = 0, y = 0;
    while (e) {
        x += e.offsetLeft - e.scrollLeft + (isNotFirefox ? e.clientLeft : 0);
        y += e.offsetTop - e.scrollTop + (isNotFirefox ? e.clientTop : 0);
        e = e.offsetParent;
    }
    return { x: x + window.scrollX, y: y + window.scrollY };
}

দেখতে http://jsbin.com/xuvovalifo/edit?html,js,output

— kernowcode
সূত্র
1

ভেবেছিলাম আমি এটিকেও সেখানে ফেলে দেব।
আমি এটি পুরানো ব্রাউজারগুলিতে পরীক্ষা করতে সক্ষম হইনি, তবে এটি শীর্ষ 3 এর সর্বশেষে কাজ করে :) :)

Element.prototype.getOffsetTop = function() {
    return ( this.parentElement )? this.offsetTop + this.parentElement.getOffsetTop(): this.offsetTop;
};
Element.prototype.getOffsetLeft = function() {
    return ( this.parentElement )? this.offsetLeft + this.parentElement.getOffsetLeft(): this.offsetLeft;
};
Element.prototype.getOffset = function() {
    return {'left':this.getOffsetLeft(),'top':this.getOffsetTop()};
};
— ডানকান
সূত্র
0

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

function getTop(root, offset) {
    var rootRect = root.getBoundingClientRect();
    var offsetRect = offset.getBoundingClientRect();
    return offsetRect.top - rootRect.top;
}

বাম অবস্থান পুনরুদ্ধারের জন্য আপনাকে অবশ্যই ফিরে যেতে হবে: 

    return offsetRect.left - rootRect.left;
— samadadi
সূত্র
-1

বাম এবং শীর্ষের ক্ষেত্রে ডিভের অবস্থান পান

  var elm = $('#div_id');  //get the div
  var posY_top = elm.offset().top;  //get the position from top
  var posX_left = elm.offset().left; //get the position from left
— বিশাল
সূত্র
আমি নীচে ভোট দিয়েছি কারণ নীচে এবং ডান অফসেটের বৈশিষ্ট্য নয় ()
— ম্যাক্রোম্যান 8:38
@ ম্যাক্রোম্যান, আমি আপনার সিদ্ধান্তকে শ্রদ্ধা করি তবে আমি ইতিমধ্যে পাঠ্যে ব্যাখ্যা করেছি যে "নীচের এবং ডান কোডটি পরীক্ষা করা হয়নি"। এছাড়াও, আমি খুব শীঘ্রই আমার কোড আপডেট করব।
— বিশাল
আমি মনে করি এটি el.offsetTopএবং el.offsetLeft(ওপি jQuery সম্পর্কে কিছুই বলে না ... আমি নিশ্চিত নই যে আপনার উত্তরটি কেন jQuery ব্যবহার করে ...)
— মেসকেব
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.