在浏览器滚动中查找元素的位置

Question

我需要一些关于找到元素位置的帮助.我正在研究一个电子书阅读器,它的所有Html与CSS.所有html逐页分段,我必须找到这样的元素

<span name="Note" style="background-color:rgb(255,255,204)">Example</span>

每个人都建议像这样的代码;

function position(elem) {
    var left = 0,
        top = 0;

    do {
        left += elem.offsetLeft;
        top += elem.offsetTop;
    } while ( elem = elem.offsetParent );

    return [ left, top ];
}position(document.getElementsByName('Note')[0]);

但它对我不起作用; 我需要元素在JavaScript中滚动的真实位置.

Answer 1

var note = document.getElementsByName('Note')[0];
var screenPosition = note.getBoundingClientRect();

通过返回的ClientRect getBoundingClientRect()有值.top,.left,.right,.bottom,.width,和.height.

这些是可见窗口上的像素位置; 当您滚动页面时.top,.bottom值和值将发生变化,甚至可能会变为负值,因为项目会从视图顶部滚动.

请注意 - 与解决方案累积offsetLeft/ offsetTop- 此解决方案不同,正确地考虑了所有浏览器(Firefox)中的元素body和html元素的边框和填充.

请参阅此测试用例:http://jsfiddle.net/QxYDe/4/(滚动页面并观察值的变化).

Internet Explorer也支持.

Answer 2

找到滚动元素位置的解决方案：

const target = document.querySelector('[name="Note"]')
window.scrollTo({
    top: Math.round(target.getBoundingClientRect().top + document.documentElement.scrollTop),
    behavior: 'smooth',
})

或者只是使用scrollIntoView：

document.querySelector('[name="Note"]').scrollIntoView({
    behavior: 'smooth',
})

Answer 3

function position(elem) { 
    var left = 0, 
        top = 0; 

    do { 
        left += elem.offsetLeft-elem.scrollLeft; 
        top += elem.offsetTop-elem.scrollTop; 
    } while ( elem = elem.offsetParent ); 

    return [ left, top ]; 
} 
var elem = document.getElementById('id');
position(elem);

Subtract the scroll positions.

Answer 4

我猜你需要把音符一直固定在左上角吗？即使滚动？

你只能用CSS做到这一点!:)

HTML:

<div id="Note" name="Note">Example</div>

CSS:

div #Note {
  background-color:rgb(255,255,204)
  left: 0px;
  position: absolute;
  top: 0px;
  z-index: 999;
}

@media screen {
  body > div #Note {
    position: fixed;
  }
}

编辑: 有几个笔记(未测试):

HTML:

<div id="Note1">Example</div>
<div id="Note2">Example</div>
<div id="Note3">Example</div>
<div id="Note4">Example</div>

CSS:

div #Note1 {
  background-color:rgb(255,255,204)
  left: 0px;
  height: 20px;
  position: absolute;
  top: 0px;
  z-index: 999;
}
div #Note2 {
  background-color:rgb(255,255,204)
  left: 0px;
  height: 20px;
  position: absolute;
  top: 20px;
  z-index: 999;
}
div #Note3 {
  background-color:rgb(255,255,204)
  left: 0px;
  height: 20px;
  position: absolute;
  top: 40px;
  z-index: 999;
}
div #Note4 {
  background-color:rgb(255,255,204)
  left: 0px;
  height: 20px;
  position: absolute;
  top: 60px;
  z-index: 999;
}

@media screen {
  body > div #Note1 {
    position: fixed;
  }

  body > div #Note2 {
    position: fixed;
  }

  body > div #Note3 {
    position: fixed;
  }

  body > div #Note4 {
    position: fixed;
  }
}