如何从文本节点使用scrollIntoView

Question

我不知道如何获取文本节点的元素，但我可以获取父元素。

我编写了一个 JavaScript 例程来使用范围进行选择。所以我有一个开始节点和结束节点，它们是通过 document.createTreeWalker(rootnode, NodeFilter.SHOW_TEXT, null, false) 获得的。

我想使用scrollIntoView()，但似乎我只能从元素中调用它。所以目前我正在使用 startNode.parentElement.scrollIntoView。

let range = new Range()
range.setStart(startNode, startPos)
range.setEnd(endNode, endPos)
document.getSelection().removeAllRanges()
document.getSelection().addRange(range)
startNode.parentElement.scrollIntoView({ behavior: 'instant', block: 'start', inline: 'start' })

当标签很小时一切都很好，但如果它是一大段文本，那么父位置可能会偏离实际元素位置。有没有办法获取文本节点的元素，以便我可以调用scrollIntoView？

作为解决方法，我使用 range.getBoundingClientRect() ，然后设置页面的滚动顶部。

let bb=range.getBoundingClientRect()
pagetop.parentElement.scrollTop = bb.y+pagetop.parentElement.scrollTop-130 // 130 fudge value

它有效:)，但我宁愿使用scrollIntoView或者至少更好地理解我做错了什么。

Answer 1

要滚动到 JavaScript 中的文本节点，不能直接在文本节点上使用

scrollIntoView()

。但是，您可以通过创建临时元素来使用解决方法。
就像在您想要的位置创建一个

<span>

元素，然后滚动到该元素，然后将其从 DOM 中删除。