Javascript:无论滚动如何，查找div相对于视口(viewport)的位置

Question

您好，我有一个固定在屏幕中间的 div。像模态。它包含其他元素。我如何找到 div 的位置以及其中的一些元素。 div 的 css 类是

.timepicker {
    box-shadow: 0 5px 5px -3px lightgray, 0 8px 10px 1px lightgray, 0px 3px 14px 2px lightgray;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
    font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
    min-width: 280px;
   position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    display: table;
    -ms-border-radius: 3px;
    border-radius: 3px;
    line-height: normal;
    overflow: hidden;
    z-index: 99999;
}

Answer 1

您可以使用元素的 getBoundingClientRect 方法来获取位置。这是一个例子:

var pos = document.getElementById('myDiv').getBoundingClientRect();
console.log(pos.left, pos.top);

#myDiv {
  position:fixed;
  left:150px;
  top:110px;
}

<div id="myDiv">
  Fixed position
</div>

返回对象的 left 和 top 属性将为您提供 x 和 y 坐标，但您也可以访问 bottom 和right 属性获取距视口(viewport)底部的距离和距视口(viewport)右侧的距离。