0

在一个长的 wordwrap 元素中，有什么方法可以检测到最左上角的可见词？

在每个单词或一堆单词周围使用 span 并不是一个好的选择，因为文本会太长并且动态加载而无法获得良好的性能，但我可能认为这不会出现其他任何情况。

示例代码（使用它http://jsfiddle.net/8utcp/2/）：

<style> #test { height: 100px; width: 150px; overflow: auto; } </style>

<div id=test> with lots of text </div>

<script> $("#test").scrollTop(50); // simulate user scroll </script>

现在你在测试 div 中有这个：

带有自动换行的滚动文本

我如何确定第一个可见词是“Adpiscing”？

答案可以使用任何框架。基于javascript或css。即使是不适用于所有浏览器的解决方案也是受欢迎的，因为它们可以成为一个很好的起点。我根本找不到关于这个问题的任何信息。

更多澄清。如果我有一个长文本，我在浏览器中打开它并向下滚动，然后我在另一个设备中打开它，具有不同的屏幕尺寸，甚至在同一个浏览器中，但放大 10 倍。哪个属性/逻辑将确保第一个可见单词始终匹配。<

4

1 回答 1

1

简短的回答是，不，你不能得到单词的位置。长答案是，你可以做你想做的事，但它很hacky。

我能想到的是：

  • 基于空格分割
  • 遍历单词标记并在单词之前和之后注入一个 span 元素，比如在单词之前和之后绝对位置，您甚至可以将 innerHTML 设置为 origwordsArray.join(" <span></span>")以便您的空格/单词变得可测量，或者您可以将每个单词包装在一个 span 中。
  • 您现在可以从父级获取跨度的偏移量，为每个单词提供粗略的坐标
  • 制定 - 基于滚动 - 哪一个可能是第一个可见的。
  • 摆脱跨度。
于 2012-05-22T11:56:18.827 回答