CSS 是否可以获取 div 元素在浏览器可视区域内的位置

在本文中，我们将介绍如何使用 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 来获取 div 元素在浏览器可视区域内的位置，而不是在整个文档内的位置。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

什么是浏览器可视区域？

浏览器可视区域指的是用户在浏览器窗口内可见的部分。当用户滚动页面时，可视区域的内容会发生变化。

使用 CSS 的 `position: fixed`

要获取 div 元素在浏览器可视区域内的位置，可以使用 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 的 position: fixed 属性。

<div id="myDiv" style="position: fixed; top: 0; left: 0;"></div>

通过将 div 元素的 position 属性设置为 fixed，可以使其相对于浏览器窗口进行定位。

获取 div 元素在浏览器可视区域内的位置

要获取 div 元素在浏览器可视区域内的位置，可以使用 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">JavaScript。

var div = document.getElementById("myDiv");
var rect = div.getBoundingClientRect();

console.log("div 元素在可视区域的位置：");
console.log("Top: " + rect.top);
console.log("Left: " + rect.left);
console.log("Bottom: " + rect.bottom);
console.log("Right: " + rect.right);

上述代码中，我们通过 getBoundingClientRect() 方法获取了 div 元素在可视区域的位置信息。返回的是一个包含 top、left、bottom 和 right 属性的 DOMRect 对象。

示例说明

假设我们有一个固定在页面右下角的悬浮按钮，我们希望获取它在可视区域的位置，以便在用户滚动页面时做出相应调整。

<div id="floatingButton" style="position: fixed; bottom: 20px; right: 20px;">
  <button>点击</button>
</div>

var button = document.querySelector("#floatingButton button");
button.addEventListener("click", function() {
  var rect = button.getBoundingClientRect();
  console.log("按钮在可视区域的位置：");
  console.log("Top: " + rect.top);
  console.log("Left: " + rect.left);
  console.log("Bottom: " + rect.bottom);
  console.log("Right: " + rect.right);
});

在上面的示例中，当用户点击悬浮按钮时，通过 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">JavaScript 获取按钮在可视区域的位置，并将结果打印到控制台。