如何在滚动的 DIV 中获取当前活动文本

Posted 2023-05-09

【中文标题】如何在滚动的 DIV 中获取当前活动文本

【英文标题】：How to get the current active text within a scrolled DIV

【发布时间】：2012-08-20 16:33:47

【问题描述】：

一个碎裂的DIV 包含需要滚动条的段落

例如

<div id="text" style='overflow:scroll;width:200px;height:200px'>

<div style='font-size:64px;'>BIG TEXT</div> 
Lorem Ipsum is simply dummy text of the printing and typesetting 
industry. Lorem Ipsum    has been the industry's standard dummy text ever  
since the 1500s, when an unknown printer took a galley of type and scrambled it 
to make a type specimen book. It has survived not only five centuries, but also 
the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets 
containing Lorem Ipsum passages, and more recently with desktop publishing software 
like Aldus PageMaker 
including versions of Lorem Ipsum.

</div>

当滚动条移动时，文字发生变化（由于overflow:scroll），是否可以只选择当前视口中显示的文字？

示例：http://jsfiddle.net/cxgkY/15/

更新：内部 HTML 可能包含可变大小的文本

【参考方案1】：

这是一个小演示，应该可以满足您的期望：little link（也适用于可变大小）。这个想法是为每个单词自动创建一个单独的span，然后，每次滚动div时，检查哪些spans是可见的（通过检查它们的top偏移量），从而更新文档选择范围.如果有什么不清楚的地方，我很乐意解释。

【讨论】：

这是要选择整个视口吗？它只是选择我的 chrome 浏览器中的第一个单词...

@lzprgmr 已修复 -- 现在可以使用，请查看更新后的演示。感谢您通知我！

酷，现在可以使用了。顺便说一句 - 这是一个绝妙的解决方案，谢谢，我学到了一些东西。

只是跟进，是否也可以处理 img 标签？ jsfiddle.net/Mmpgc/23 如果你不能，没关系，谢谢..

如果您编写一些代码来确保 img 标签属于一个 ，它应该可以工作，我尝试通过在 chrome 开发者工具中进行调整

【参考方案2】：

不知道你只选择当前视口中的文本是什么意思，但可能是这样的：

var elm = $("#text"),
    t = $(elm).text().split(' '),
    html = [],
    selected_text = '';

$.each(t, function(i,e) 
    html.push('<span>'+e+'</span>');
);

elm.html(html.join(' '));

$('span', elm).each(function(i,e) 
    if ($(e).offset().top < elm.height()) 
        $(e).css('background', 'red');
        selected_text += $(e).text()+' ';
    
);

FIDDLE

如果本练习的目的只是在另一个容器元素中显示文本，您可以按照常规方式进行并伪造它：

$("#text").on('scroll', function() 
    $('#visible').html($(this).html()).scrollTop($(this).scrollTop());
);

FIDDLE ​

【讨论】：

我认为您的解决方案很接近，除了使用text() 方法删除了html，也许可以在每个现有字符中包含一个跨度？但保留 HTML？

@Howard - 你打算用它做什么，只是在另一个元素中显示文本，比如 Speransky 的例子，还是你需要选择文本并以某种方式改变它？？

@Howard 好吧，是可以做到这一点——无论如何，部分地。请参考我的回答中的更新演示。

adeneo，“伪造”的好点子。虽然有一点“错误”，因为显然滚动条计入高度。

【参考方案3】：

可能是这样的（见 DEMO：http://jsfiddle.net/cxgkY/14/）：

HTML：

<div id="text">
    <div id="wrapper">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
</div>

​ ​​​ JavaScript：

$('#text').scroll(function () 
  var text = $(this).text();

  var begin = $(this).scrollTop() / 
      $(this).children('#wrapper').height();

  var end = begin + $(this).height() /
    $(this).children('#wrapper').height();

  var text = text.slice(text.length * begin, text.length * end);
  $('#visible').text(text);
);  

【讨论】：

@lzprgmr，感谢您的输入，但如果 html 包含可变大小的文本，例如jsfiddle.net/cxgkY/15

@SperanskyDanil 是的，很抱歉，我已经更新了描述。

@Howard - 这看起来非常尴尬，您可能应该重新考虑您的整个方法，因为任何解决方案都只是一种黑客攻击，而且可能不是很准确。我只是想不出任何需要这样做的场景？

【参考方案4】：

<div id="text">
    <p>Line 1</p>
    <p>Line 2</p>
    <p>Line 3</p>

</div>

你可以这样做..

$(function()
    var meanLineHeight = $('#text > p').first().outerHeight();

    var result = $('#result');

    $('#text').scroll(function()
        var linesScrolled = Math.ceil(this.scrollTop/ meanLineHeight);
        console.log(linesScrolled);

        var linesToSelect = $('#text > p').slice(linesScrolled);
        linesToSelect.css('background-color', 'yellow');
    );​​​​​​​
);

​DEMO

【讨论】：

谢谢，抱歉我已经更新了问题，文本可能不等高

@Howard：你能更新我的小提琴试试吗？我的猜测是可变高度应该增加 p 元素的计算高度。