12

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 には可変サイズのテキストが含まれる場合があります

4

4 に答える 4

4

これは、あなたが期待していることを行う小さなデモです:小さなリンク(可変サイズでも動作します)。span単語ごとに個別の を自動的に作成し、divスクロールするたびspanに (オフセットを確認して) どの が表示されているかを確認し、topドキュメントの選択範囲を更新するという考え方です。不明な点があれば、喜んで説明します。

于 2012-08-25T10:10:08.127 に答える
3

現在のビューポートでテキストだけを選択することで何を意味するのかわかりませんが、次のようなものかもしれません:

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()+' ';
    }
});

フィドル

この演習のポイントが別のコンテナー要素にテキストを表示することだけである場合は、通常の方法でそれを行い、それを偽造することができます:

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

フィドル </p>

于 2012-08-25T09:43:33.857 に答える
0

次のようなものかもしれません (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);
});
于 2012-08-25T09:41:33.487 に答える
0 
<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');
    });​​​​​​​
});

デモ

于 2012-08-25T09:58:06.817 に答える