如何用JavaScript获取div背景图可见区域的坐标？

Alright, let's tackle this problem step by step. To find the visible portion of your 1000px×600px background image (including handling hidden areas from scrolling), we'll need to combine DOM properties, computed styles, and a bit of math. Here's how to do it:

Key Concepts to Understand #

First, let's outline the critical values we'll need to calculate:

• The div's scroll position (scrollLeft, scrollTop)
• The div's visible viewport size (clientWidth, clientHeight)
• The background image's rendered position (backgroundPositionX/Y)
• The background image's rendered dimensions (especially if using cover/contain)

Step-by-Step Implementation #

1. Grab the Target Div and Its Computed Styles #

First, get a reference to your div and extract its computed CSS styles (this ensures we get actual rendered values, not just inline styles):

const targetDiv = document.getElementById('your-div-id'); // Replace with your div's ID
const computedStyles = window.getComputedStyle(targetDiv);

2. Extract Div Scroll and Viewport Data #

These values tell us how much the div has been scrolled, and the size of its visible area:

// Scroll offset of the div (how far it's scrolled from top/left)
const divScrollLeft = targetDiv.scrollLeft;
const divScrollTop = targetDiv.scrollTop;

// Visible viewport size of the div
const divVisibleWidth = targetDiv.clientWidth;
const divVisibleHeight = targetDiv.clientHeight;

3. Handle Background Image Position and Size #

We need to convert background position and size values into absolute pixels (since they might be percentages, cover, contain, etc.):

Convert Background Position to Pixels

The backgroundPositionX and backgroundPositionY can be in pixels or percentages. Let's convert them to absolute values:

// Parse background position values
const bgPosX = computedStyles.backgroundPositionX;
const bgPosY = computedStyles.backgroundPositionY;

// Helper function to convert position values to pixels
function convertToPixels(value, containerSize, imageSize) {
  if (value.includes('%')) {
    const percentage = parseFloat(value);
    return ((containerSize - imageSize) * (percentage / 100));
  }
  return parseFloat(value); // Already in pixels
}

// Original background image dimensions (given as 1000px × 600px)
const bgOriginalWidth = 1000;
const bgOriginalHeight = 600;

// Convert position to pixels
const bgOffsetX = convertToPixels(bgPosX, targetDiv.offsetWidth, bgOriginalWidth);
const bgOffsetY = convertToPixels(bgPosY, targetDiv.offsetHeight, bgOriginalHeight);

Handle cover/contain for Background Size

If your background uses background-size: cover or contain, we need to calculate the actual rendered size of the image:

let bgRenderedWidth = bgOriginalWidth;
let bgRenderedHeight = bgOriginalHeight;

const bgSize = computedStyles.backgroundSize;
if (bgSize === 'cover') {
  const ratio = Math.max(targetDiv.offsetWidth / bgOriginalWidth, targetDiv.offsetHeight / bgOriginalHeight);
  bgRenderedWidth = bgOriginalWidth * ratio;
  bgRenderedHeight = bgOriginalHeight * ratio;
} else if (bgSize === 'contain') {
  const ratio = Math.min(targetDiv.offsetWidth / bgOriginalWidth, targetDiv.offsetHeight / bgOriginalHeight);
  bgRenderedWidth = bgOriginalWidth * ratio;
  bgRenderedHeight = bgOriginalHeight * ratio;
} else if (bgSize !== 'auto') {
  // Handle explicit sizes like "500px 300px"
  const [width, height] = bgSize.split(' ').map(val => parseFloat(val));
  bgRenderedWidth = width;
  bgRenderedHeight = height;
}

4. Calculate Visible Background Coordinates #

Now we can compute the visible portion of the background image relative to its original 1000px×600px size:

// Top-left corner of the visible area in the background image
const visibleBgX = Math.abs(bgOffsetX) + divScrollLeft;
const visibleBgY = Math.abs(bgOffsetY) + divScrollTop;

// Bottom-right corner of the visible area in the background image
const visibleBgRight = visibleBgX + divVisibleWidth;
const visibleBgBottom = visibleBgY + divVisibleHeight;

// Final visible coordinates (clamped to the image's bounds to avoid negative values or overflows)
const visibleCoordinates = {
  topLeft: {
    x: Math.max(0, visibleBgX),
    y: Math.max(0, visibleBgY)
  },
  bottomRight: {
    x: Math.min(bgOriginalWidth, visibleBgRight),
    y: Math.min(bgOriginalHeight, visibleBgBottom)
  },
  width: visibleBgRight - visibleBgX,
  height: visibleBgBottom - visibleBgY
};

console.log('Visible background coordinates:', visibleCoordinates);

Notes on Edge Cases #

• If the div isn't scrollable (overflow: visible), scrollLeft and scrollTop will be 0, so the visible area is just the div's viewport over the background.
• If the background image is fully visible (no hidden areas), the coordinates will match the div's viewport relative to the background.
• The clamping step ensures we don't get values outside the original 1000px×600px image bounds.

内容的提问来源于stack exchange，提问作者Vincent J. Michuki