ভিউপোর্টের সাথে সম্পর্কিত উপাদানটির অবস্থান পেতে jquery ব্যবহার করা qu

Question

ভিউপোর্টের সাথে সম্পর্কিত (ডকুমেন্টের চেয়ে) পৃষ্ঠায় কোনও উপাদানের অবস্থান পাওয়ার উপযুক্ত উপায় কী। jQuery.offsetফাংশন প্রতিশ্রুতিবদ্ধ মনে হয়েছিল:

প্রথম উপাদানটির বর্তমান স্থানাঙ্কগুলি পান, বা নথির সাথে সম্পর্কিত, প্রতিটি উপাদানের স্থানাঙ্কগুলি মিলিত উপাদানগুলির সেটে সেট করুন।

তবে এটি নথির সাথে সম্পর্কিত। ভিউপোর্টের সাথে তুলনামূলকভাবে অফসেটগুলি কী এমন কোনও সমতুল্য পদ্ধতি রয়েছে?

Comments

দ্রষ্টব্য: @ ইগর জি এর উত্তর দেখুন ...

— কার্ল স্মিথ

ডিএ-তে, আপনার সত্যিকার অর্থেই ইগর জি-র উত্তরটি গ্রহণযোগ্য হিসাবে সেট করা উচিত, এটি জীবন রক্ষাকারী!

— ভিনসেন্ট ডুপ্রেজ

Answer 1

মাত্রা প্লাগইনটি দেখুন, বিশেষত scrollTop()/ scrollLeft()। Http://api.jquery.com/scrolTop- এ তথ্য পাওয়া যাবে ।

Comments

আমি অন্য প্লাগইনটি ব্যবহার করতে চাইনি, তবে $ (উইন্ডো) .স্ক্রোলটপ () ঠিক আমার যা প্রয়োজন তা হ'ল! ধন্যবাদ!

— ডিএ

মাত্রা প্লাগইন এখন jQuery মূল অংশ। ভিউপোর্ট প্লাগইনটিও দরকারী হতে পারে: অ্যাপেলসিনি.এন.

— স্ট্রিপলিং

Answer 2

কোনও উপাদানের আকার এবং অবস্থান নির্ধারণের সবচেয়ে সহজ উপায় হল এর getBoundingClientRect () পদ্ধতিটি কল করা । এই পদ্ধতিটি ভিউপোর্ট স্থানাঙ্কগুলিতে উপাদান অবস্থানগুলি দেয়। এটি কোনও আর্গুমেন্টের প্রত্যাশা করে না এবং বাম, ডান, উপরে এবং নীচে বৈশিষ্ট্যযুক্ত কোনও বস্তু প্রদান করে । বাম এবং উপরের বৈশিষ্ট্যগুলি এলিমেন্টের উপরের-বাম কোণে X এবং Y স্থানাঙ্ক দেয় এবং ডান এবং নীচের বৈশিষ্ট্যগুলি নীচের-ডান কোণার স্থানাঙ্ক দেয়।

element.getBoundingClientRect(); // Get position in viewport coordinates

সর্বত্র সমর্থিত।

Comments

এটি অবিশ্বাস্য যে এই পদ্ধতিটি আই 5 দ্বারা যুক্ত করা হয়েছিল ... যখন কিছু ভাল হয়, ভাল হয়!

— রাই রিওজাস

এটি প্রথমে দুর্দান্ত মনে হয়েছিল তবে এটি মোবাইল সাফারি on. এ জুম করা কোনও ব্যবহারকারীর জন্য অ্যাকাউন্ট নয়

— MyNameIsKo

সর্বশেষতম ফায়ারফক্স দ্বারা সমর্থিত নয়getBoundingClientRect is not a function

— user007

@ ব্যবহারকারী007 আমি নিশ্চিত করেছি যে এটি সর্বশেষতম ফায়ারফক্স দ্বারা সমর্থিত।

— অ্যাডেন্ডেনাট

দুর্দান্ত উত্তর, এবং এটিকে jquery করার জন্য সহজভাবে এটি করুন: $('#myElement')[0].getBoundingClientRect().top(বা অন্য কোনও অবস্থান)

— গুইলিউম আরলুইসন

Answer 3

পৃষ্ঠার উচ্চতা এবং স্ক্রোল পরিমাণ (x, y) পেতে (ফোলা) মাত্রা প্লাগইন ব্যবহার না করে এখানে দুটি ফাংশন রয়েছে:

// getPageScroll() by quirksmode.com
function getPageScroll() {
    var xScroll, yScroll;
    if (self.pageYOffset) {
      yScroll = self.pageYOffset;
      xScroll = self.pageXOffset;
    } else if (document.documentElement && document.documentElement.scrollTop) {
      yScroll = document.documentElement.scrollTop;
      xScroll = document.documentElement.scrollLeft;
    } else if (document.body) {// all other Explorers
      yScroll = document.body.scrollTop;
      xScroll = document.body.scrollLeft;
    }
    return new Array(xScroll,yScroll)
}

// Adapted from getPageSize() by quirksmode.com
function getPageHeight() {
    var windowHeight
    if (self.innerHeight) { // all except Explorer
      windowHeight = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) {
      windowHeight = document.documentElement.clientHeight;
    } else if (document.body) { // other Explorers
      windowHeight = document.body.clientHeight;
    }
    return windowHeight
}

Comments

এটা অসাধারণ. খুব দরকারী.

— জিমি

কৌতূহলের বাইরে আপনি কেন এই ক্ষেত্রে উইন্ডোর পরিবর্তে "স্ব" সম্পত্তি ব্যবহার করলেন?

— dkugappi

@Denis stackoverflow.com/questions/3638887/...

— E2-E4

Answer 4

jQuery.offsetএই চিত্রটিতে একত্রিত হওয়া scrollTopএবং scrollLeftযেমনটি দেখানো দরকার:

ডেমো:

function getViewportOffset($e) {
  var $window = $(window),
    scrollLeft = $window.scrollLeft(),
    scrollTop = $window.scrollTop(),
    offset = $e.offset(),
    rect1 = { x1: scrollLeft, y1: scrollTop, x2: scrollLeft + $window.width(), y2: scrollTop + $window.height() },
    rect2 = { x1: offset.left, y1: offset.top, x2: offset.left + $e.width(), y2: offset.top + $e.height() };
  return {
    left: offset.left - scrollLeft,
    top: offset.top - scrollTop,
    insideViewport: rect1.x1 < rect2.x2 && rect1.x2 > rect2.x1 && rect1.y1 < rect2.y2 && rect1.y2 > rect2.y1
  };
}
$(window).on("load scroll resize", function() {
  var viewportOffset = getViewportOffset($("#element"));
  $("#log").text("left: " + viewportOffset.left + ", top: " + viewportOffset.top + ", insideViewport: " + viewportOffset.insideViewport);
});

body { margin: 0; padding: 0; width: 1600px; height: 2048px; background-color: #CCCCCC; }
#element { width: 384px; height: 384px; margin-top: 1088px; margin-left: 768px; background-color: #99CCFF; }
#log { position: fixed; left: 0; top: 0; font: medium monospace; background-color: #EEE8AA; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- scroll right and bottom to locate the blue square -->
<div id="element"></div>
<div id="log"></div>

Comments

এটি আমার পক্ষে দুর্দান্ত কাজ করেছে তবে আমি এটি নির্ধারণ করতে ব্যবহার করছি যে কোনও সরঞ্জামদণ্ডটি

— জর্দান

এটি একেবারে, কোনও ক্ষেত্রেই সঠিক উত্তর। অন্য সকলের মাউস / স্ক্রোল ডেল্টা কনফিগারেশন, ব্রাউজারগুলি, অবজেক্টের অবস্থান ইত্যাদির উপর নির্ভর করে সমস্যা রয়েছে

— পেড্রো

Answer 5

এখানে একটি ফাংশন যা ভিউপোর্টের মধ্যে একটি উপাদানের বর্তমান অবস্থান গণনা করে:

/**
 * Calculates the position of a given element within the viewport
 *
 * @param {string} obj jQuery object of the dom element to be monitored
 * @return {array} An array containing both X and Y positions as a number
 * ranging from 0 (under/right of viewport) to 1 (above/left of viewport)
 */
function visibility(obj) {
    var winw = jQuery(window).width(), winh = jQuery(window).height(),
        elw = obj.width(), elh = obj.height(),
        o = obj[0].getBoundingClientRect(),
        x1 = o.left - winw, x2 = o.left + elw,
        y1 = o.top - winh, y2 = o.top + elh;

    return [
        Math.max(0, Math.min((0 - x1) / (x2 - x1), 1)),
        Math.max(0, Math.min((0 - y1) / (y2 - y1), 1))
    ];
}

রিটার্ন মানগুলি এইভাবে গণনা করা হয়:

ব্যবহার:

visibility($('#example'));  // returns [0.3742887830933581, 0.6103752759381899]

ডেমো:

function visibility(obj) {var winw = jQuery(window).width(),winh = jQuery(window).height(),elw = obj.width(),
    elh = obj.height(), o = obj[0].getBoundingClientRect(),x1 = o.left - winw, x2 = o.left + elw, y1 = o.top - winh, y2 = o.top + elh; return [Math.max(0, Math.min((0 - x1) / (x2 - x1), 1)),Math.max(0, Math.min((0 - y1) / (y2 - y1), 1))];
}
setInterval(function() {
  res = visibility($('#block'));
  $('#x').text(Math.round(res[0] * 100) + '%');
  $('#y').text(Math.round(res[1] * 100) + '%');
}, 100);

#block { width: 100px; height: 100px; border: 1px solid red; background: yellow; top: 50%; left: 50%; position: relative;
} #container { background: #EFF0F1; height: 950px; width: 1800px; margin-top: -40%; margin-left: -40%; overflow: scroll; position: relative;
} #res { position: fixed; top: 0; z-index: 2; font-family: Verdana; background: #c0c0c0; line-height: .1em; padding: 0 .5em; font-size: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="res">
  <p>X: <span id="x"></span></p>
  <p>Y: <span id="y"></span></p>
</div>
<div id="container"><div id="block"></div></div>

Answer 6

আমি দেখতে পেলাম যে ২০১৪ সালের জানুয়ারি পর্যন্ত কলিবোর উত্তর ফায়ারফক্সে আর কাজ করছে না Spec বিশেষত, if (self.pageYOffset)ক্লায়েন্টটি ডান স্ক্রল করে থাকলে ট্রিগার করেনি তবে নীচে নয় - কারণ 0এটি একটি মিথ্যা নম্বর। এটি কিছু সময়ের জন্য সনাক্ত করা গেল কারণ ফায়ারফক্স সমর্থন করেছিল document.body.scrollLeft/ Topতবে এটি এখন আমার পক্ষে কাজ করছে না (ফায়ারফক্স ২ 26.০ এ)।

এখানে আমার পরিবর্তিত সমাধান:

var getPageScroll = function(document_el, window_el) {
  var xScroll = 0, yScroll = 0;
  if (window_el.pageYOffset !== undefined) {
    yScroll = window_el.pageYOffset;
    xScroll = window_el.pageXOffset;
  } else if (document_el.documentElement !== undefined && document_el.documentElement.scrollTop) {
    yScroll = document_el.documentElement.scrollTop;
    xScroll = document_el.documentElement.scrollLeft;
  } else if (document_el.body !== undefined) {// all other Explorers
    yScroll = document_el.body.scrollTop;
    xScroll = document_el.body.scrollLeft;
  }
  return [xScroll,yScroll];
};

FF26, ক্রোম 31, আই 11 এ পরীক্ষিত এবং কাজ করছে। প্রায় সবগুলিই তাদের পুরানো সংস্করণগুলিতে অবশ্যই কাজ করে।