[英]Javascript: Find position of div with respect to viewport irrespective of scroll
嗨,我有一个固定在屏幕中间的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;
}
您可以使用元素的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
属性以获取距视口底部的距离和距视口右侧的距离。
您可以通过先获取div元素来使用香草javascript,然后仅是分别引用返回的
<div>
的.offsetLeft
和.offsetTop
属性的一种情况:var div = document.querySelector('div.timepicker'); div.offsetLeft; // x position div.offsetTop); // y position
这是您可以尝试的代码段:
var div = document.querySelector('div.timepicker'); console.log('x position: ' + div.offsetLeft); // x position console.log('y position: ' + div.offsetTop); // y position
.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; }
<div class='timepicker'>DIV</div>
function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return [curleft, curtop];
}
}
使用此函数查找div的位置:
findPos(document.getElementById('time'));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.