getBoundingClientRect()问题

Question

我在密码上的滑块有问题。我已经在我的网站上实施它，并认识到，如果我在网站上滚动，内容的白色高音正在移动。白色荧光笔上下移动。我真的不知道怎么解决这个问题。原始代码也有相同的问题。也许有人有主意？代码位于coepen.io/JavaScriptJunkie/pen/ZMMRRQ上。

Answer 1

getBoundingClientRect()提供当前屏幕上视图中的矩形的坐标。只需将window.pageYOffset (在页面顶部的视口上方的高度)添加到新的Y坐标中，就可以抵消这个移动的Y位置。

参见您的代码分叉中的16：https://codepen.io/yoat/pen/XWzqRKJ

var x = this.getBoundingClientRect().left;
// only the y position changes, not the X or the height!
var y = this.getBoundingClientRect().top + window.pageYOffset;
var width = this.getBoundingClientRect().width;
var height = this.getBoundingClientRect().height;