113

ডকুমেন্ট / বডি / ব্রাউজার উইন্ডোর সাথে সম্পর্কিত উপাদানগুলির অবস্থান নির্ধারণের সবচেয়ে সহজ উপায় কী?

এই মুহুর্তে আমি ব্যবহার করছি .offsetLeft/offsetTopতবে এই পদ্ধতিটি কেবল পিতামণ্ডলের সাথে সম্পর্কিত অবস্থান আপনাকে দেয়, তাই আপনাকে শরীরের উপাদানটির সাথে কত পিতামাতার তা নির্ধারণ করতে হবে, শরীর / ব্রাউজার উইন্ডো / নথির অবস্থানের সাথে সম্পর্কিত সম্পর্কটি জানতে।

এই পদ্ধতিটিও জটিল।

javascript dom

— আইনস্টাইন
সূত্র

58

আপনি ডিওএম এর offsetParentশীর্ষ স্তরের উপরে যেতে পারেন ।

function getOffsetLeft( elem )
{
    var offsetLeft = 0;
    do {
      if ( !isNaN( elem.offsetLeft ) )
      {
          offsetLeft += elem.offsetLeft;
      }
    } while( elem = elem.offsetParent );
    return offsetLeft;
}

— KeatsKelleher
সূত্র

28

না এটি হয় না, যখন কোনও পিতা-মাতার (বিশেষত এইচটিএমএল উপাদান !!!) মার্জিন, প্যাডিংস বা সীমানা থাকে।

— ফ্ল্যাশ থান্ডার

মার্জিন স্টাফ সম্পর্কিত ... এটি বক্স-সাইজিংকে সীমান্ত-বাক্সে সেট করতে সহায়তা করতে পারে ... বা সেই লাইন বরাবর এমন কিছু ... যা ঠিক করা যায় না ...

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

— xianshenglu

6

কেন এটি গৃহীত উত্তর? এটি পুরানো এবং খারাপ অভিনয় করছে। আপনার নিজের পক্ষে একটি সুবিধা করুন এবং অন্যান্য উত্তরের পরামর্শ অনুসারে getBoundingClientRect () ব্যবহার করুন।

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

177

আপনি এইভাবে ডিওএমকে অনুসরণ না করে উপরে এবং বামে পেতে পারেন :

function getCoords(elem) { // crossbrowser version
    var box = elem.getBoundingClientRect();

    var body = document.body;
    var docEl = document.documentElement;

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

    var clientTop = docEl.clientTop || body.clientTop || 0;
    var clientLeft = docEl.clientLeft || body.clientLeft || 0;

    var top  = box.top +  scrollTop - clientTop;
    var left = box.left + scrollLeft - clientLeft;

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

— পুদিনা
সূত্র

6

এই উত্তরটি পিতামাতার অফসেটগুলিকে বিবেচনা করে না। এটি কেবল ভিউপোর্টের সাথে সম্পর্কিত

— নিকি

3

@ নিকি এটি সত্য নয় - ভিউপোর্টের অবস্থান এবং প্লাস্টিকের স্ক্রোল অফসেট চেকগুলি পুরো ডকুমেন্টের সাথে সম্পর্কিত স্থানাঙ্ক দেয়।

— নচিকেতা

1

মোবাইল ডিভাইসগুলিতে বগি হতে পারে stackoverflow.com/a/32623832/962634 গবেষণা দরকার

— বেসিল

1

কেন আপনি ক্লায়েন্টটপ / ক্লায়েন্টলফ্ট বিয়োগ করবেন?

— তিমোহ

1

@ টিমোহ ক্লায়েন্ট টপ / ক্লায়েন্ট লেফট উপাদানটির সীমানা মানগুলির সাথে মিল রাখে <html>।

— রাফেল রাফাতপানঃ

98

আপনি element.getBoundingClientRect()ভিউপোর্টের সাথে সম্পর্কিত উপাদান অবস্থান পুনরুদ্ধার করতে ব্যবহার করতে পারেন ।

তারপরে document.documentElement.scrollTopভিউপোর্ট অফসেট গণনা করতে ব্যবহার করুন।

দুটির যোগফল নথির সাথে তুলনামূলক উপাদান অবস্থান দেবে:

element.getBoundingClientRect().top + document.documentElement.scrollTop

— dy_
সূত্র

10

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

— মিস্টারভিমস

14

তিনি ভিউপোর্টের সাথে তুলনামূলকভাবে আরম্ভ করে এবং নথির সাথে তুলনায় এটি স্ক্রোলওয়াই যুক্ত করে।

— জোয়াকুইন কুয়েঙ্কা আবেলা

2

document.documentElement.scrollTopwindow.scrollY

— সাফারিটিতে

7

আমি ব্যবহার করার পরামর্শ দিচ্ছি

element.getBoundingClientRect()

যেমন প্রস্তাবিত এখানে মাধ্যমে সরাসরি স্বনির্ধারিত অফসেট গণনা পরিবর্তে offsetLeft , offsetTop এবং offsetParent । এখানে প্রস্তাবিত হিসাবে কিছু পরিস্থিতিতে * ম্যানুয়াল ট্র্যাভারসাল অবৈধ ফলাফল উত্পাদন করে। এই প্লাঙ্কারটি দেখুন: http://plnkr.co/pC8Kgj

* যখন উপাদান স্থির (= ডিফল্ট) অবস্থানের সাথে কোনও স্ক্রোলযোগ্য পিতামাতার অভ্যন্তরে থাকে।

— Hanis
সূত্র

আপনি এতে স্ক্রোল লেফট এবং স্ক্রোলটপ অন্তর্ভুক্ত করে অফসেট গণনা কাজ করতে পারেন।

— বেন জে

তবে আমি CSS3 রূপান্তরগুলি খুঁজে পেয়েছি offsetLeftএবং offsetTopগ্রহণ করি না, যা getBoundingClientRect()করে does সুতরাং এটি একটি ক্ষেত্রে ফলাফল অবৈধ হতে পারে। আপনার যদি এটির প্রয়োজন হয় তবে আপনি পিতামাতার (যেমন offsetLeft) ব্যবহারের তুলনায় কোনও উপাদানের অফসেট পেতে পারেন (element.getBoundingClientRect().left - parent.getBoundingClientRect().left)।

— বেন জে

ডিএফ উচ্চতর আপ করা উচিত; এই মানগুলি আরও বেশি কার্যকর এবং সমস্ত একটি কলের ক্ষেত্রেও!

— মিশ্র 3 ডি

7

document-offset( তৃতীয় পক্ষের স্ক্রিপ্ট ) আকর্ষণীয় এবং এটি এখানে অন্যান্য উত্তর থেকে পন্থাগুলি উত্সাহিত বলে মনে হচ্ছে।

উদাহরণ:

var offset = require('document-offset')
var target = document.getElementById('target')
console.log(offset(target))
// => {top: 69, left: 108}

— ম্যাথিউ এম-গোসেলিন
সূত্র

5

অফসেটপ / অফসেটলফ্ট ট্রিপ আপ প্রান্তের মামলাগুলি মোকাবেলা করার সময় আমি নিম্নলিখিত পদ্ধতিটি সবচেয়ে নির্ভরযোগ্য হিসাবে খুঁজে পেয়েছি।

function getPosition(element) {
    var clientRect = element.getBoundingClientRect();
    return {left: clientRect.left + document.body.scrollLeft,
            top: clientRect.top + document.body.scrollTop};
}

— রবিন স্টুয়ার্ট
সূত্র

4

যারা ডকুমেন্টের তুলনায় কোনও উপাদানের বিভিন্ন পদের x এবং y স্থানাঙ্ক পেতে চান তাদের জন্য।

const getCoords = (element, position) => {
  const { top, left, width, height } = element.getBoundingClientRect();
  let point;
  switch (position) {
    case "top left":
      point = {
        x: left + window.pageXOffset,
        y: top + window.pageYOffset
      };
      break;
    case "top center":
      point = {
        x: left + width / 2 + window.pageXOffset,
        y: top + window.pageYOffset
      };
      break;
    case "top right":
      point = {
        x: left + width + window.pageXOffset,
        y: top + window.pageYOffset
      };
      break;
    case "center left":
      point = {
        x: left + window.pageXOffset,
        y: top + height / 2 + window.pageYOffset
      };
      break;
    case "center":
      point = {
        x: left + width / 2 + window.pageXOffset,
        y: top + height / 2 + window.pageYOffset
      };
      break;
    case "center right":
      point = {
        x: left + width + window.pageXOffset,
        y: top + height / 2 + window.pageYOffset
      };
      break;
    case "bottom left":
      point = {
        x: left + window.pageXOffset,
        y: top + height + window.pageYOffset
      };
      break;
    case "bottom center":
      point = {
        x: left + width / 2 + window.pageXOffset,
        y: top + height + window.pageYOffset
      };
      break;
    case "bottom right":
      point = {
        x: left + width + window.pageXOffset,
        y: top + height + window.pageYOffset
      };
      break;
  }
  return point;
};

ব্যবহার

getCoords(document.querySelector('selector'), 'center')
getCoords(document.querySelector('selector'), 'bottom right')
getCoords(document.querySelector('selector'), 'top center')

— রাফেল রাফাতপানঃ
সূত্র

2

আপনি jQuery ব্যবহার করতে যদি আপত্তি না থাকে, তবে আপনি offset()ফাংশনটি ব্যবহার করতে পারেন । আপনি যদি এই ফাংশন সম্পর্কে আরও পড়তে চান তবে ডকুমেন্টেশন পড়ুন ।

— আদম
সূত্র

1

http://www.quirksmode.org/js/findpos.html এটি করার সর্বোত্তম উপায় ব্যাখ্যা করে, সর্বোপরি, আপনি অফসেটগুলি খুঁজে পেতে এবং পিতামাতার গাছটিকে অনুসরণ করতে হবে সঠিক পথে।

— জেক কলস্টাড
সূত্র

নথির সাথে সম্পর্কিত উপাদানটির অবস্থান সন্ধান করা

উদাহরণ:

ব্যবহার