Sử dụng jquery để nhận vị trí của phần tử so với khung nhìn

Cách thích hợp để có được vị trí của một phần tử trên trang so với chế độ xem (thay vì tài liệu). jQuery.offsetchức năng có vẻ hứa hẹn:

Lấy tọa độ hiện tại của phần tử đầu tiên hoặc đặt tọa độ của mọi phần tử, trong tập hợp các phần tử đã so khớp, liên quan đến tài liệu.

Nhưng đó là liên quan đến tài liệu. Có phương pháp tương đương nào trả về hiệu số so với khung nhìn không?

Đặc biệt, hãy xem xét plugin Thứ nguyên scrollTop()/ scrollLeft(). Thông tin có thể được tìm thấy tại http://api.jquery.com/scrollTop .

Cách dễ nhất để xác định kích thước và vị trí của một phần tử là gọi phương thức getBoundsClientRect () của nó . Phương thức này trả về vị trí phần tử trong tọa độ khung nhìn. Nó mong đợi không có đối số và trả về một đối tượng có các thuộc tính trái, phải, trên và dưới . Thuộc tính left và top cung cấp tọa độ X và Y của góc trên bên trái của phần tử và thuộc tính right và bottom cung cấp tọa độ của góc dưới bên phải.

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

Được hỗ trợ ở mọi nơi.

Dưới đây là hai chức năng để lấy chiều cao trang và số lượng cuộn (x, y) mà không cần sử dụng plugin kích thước (phình to):

// 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
}

jQuery.offsetcần được kết hợp với scrollTopvà scrollLeftnhư thể hiện trong sơ đồ này:

Bản giới thiệu:

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>

Đây là một hàm tính toán vị trí hiện tại của một phần tử trong khung nhìn:

/**
 * 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))
    ];
}

Các giá trị trả về được tính như sau:

Sử dụng:

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

Bản giới thiệu:

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>

Tôi thấy rằng câu trả lời của cballou đã không còn hoạt động trong Firefox kể từ tháng 1 năm 2014. Cụ thể, if (self.pageYOffset)không kích hoạt nếu khách hàng đã cuộn sang phải, nhưng không xuống - vì 0là một số sai. Điều này đã không được phát hiện trong một thời gian vì Firefox hỗ trợ document.body.scrollLeft/ Top, nhưng điều này không còn hoạt động đối với tôi (trên Firefox 26.0).

Đây là giải pháp đã sửa đổi của tôi:

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];
};

Đã thử nghiệm và hoạt động trong FF26, Chrome 31, IE11. Hầu như chắc chắn hoạt động trên các phiên bản cũ hơn của tất cả chúng.