滚动浏览网页时是否可以突出显示单个文本行？与此类似，但是当您滚动时

Question

我发现这个例子与我想要做的很接近。

$('p').html(function() {
    return $(this).text().replace(/\w+[,.]?\s+?/g, "<span>$&</span>")
});

$('p').on('mouseenter', 'span', function() {
    var $span = $(this);
    $('p span').filter(function() {
        return $(this).offset().top == $span.offset().top;
    }).toggleClass('hover');
}).on('mouseleave', 'span', function() {
    $('p span').removeClass('hover');
})

https://jsfiddle.net/pwun0uh9/1/

Answer 1

根据您提供的代码，我设法实现了这样的目标：

$('p').html(function() {
 return $(this).text().replace(/\w+[,.]?\s+?/g, "<span>$&</span>")
});

const offsetFromTopEdge = 10; // the lines 10px from the top edge of the window will be highlighted, you can increase this value
const $spans = $('p span');
$(window).on('scroll', onWindowScroll); // run onWindowScroll function every time users scrolls the page
onWindowScroll(); // run this function once, before any scroll happens, so the line is highlighted on the page init

function onWindowScroll () {
  const scrollTop = $(window).scrollTop();
  let firstHighlightedSpanOffsetTop;
  $spans.removeClass('hover'); // remove red background from all the spans
  $spans
    .filter(function() {
        const offset = $(this).offset();
  
     if (firstHighlightedSpanOffsetTop === undefined) { // if none span highlighted yet
         const isSpanMarked = scrollTop + offsetFromTopEdge < offset.top;
         /* let's save the scrollTop value of the first highlighted span.
         We will test against it later on to find all spans which are at the same line */
         if (isSpanMarked) firstHighlightedSpanOffsetTop = offset.top;
         return isSpanMarked;
        }

        // check if the span has the same offset top as the first highlighted (ergo, they're at the same line)
        return offset.top === firstHighlightedSpanOffsetTop;
    })
    .addClass('hover');
}

.hover { 
    background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Nam in nisi eleifend, efficitur ligula vel, scelerisque risus. 
    Interdum et malesuada fames ac ante ipsum primis in faucibus. 
    Nam semper diam sodales eros dictum euismod. Duis ut hendrerit leo. Sed iaculis sem ac est porttitor facilisis. 
    In convallis facilisis libero ut interdum. Phasellus scelerisque ex in lacus tempus mollis. Integer scelerisque viverra elit id fringilla. Proin nibh arcu, imperdiet a lacus ac, feugiat interdum sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse ultrices vestibulum orci, a varius quam cursus ut. Nulla ut suscipit sapien. Morbi et urna elementum, pretium augue non, tristique nulla. Nulla massa tellus, facilisis at fringilla et, rutrum ac libero.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Nam in nisi eleifend, efficitur ligula vel, scelerisque risus. 
    Interdum et malesuada fames ac ante ipsum primis in faucibus. 
    Nam semper diam sodales eros dictum euismod. Duis ut hendrerit leo. Sed iaculis sem ac est porttitor facilisis. 
    In convallis facilisis libero ut interdum. Phasellus scelerisque ex in lacus tempus mollis. Integer scelerisque viverra elit id fringilla. Proin nibh arcu, imperdiet a lacus ac, feugiat interdum sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse ultrices vestibulum orci, a varius quam cursus ut. Nulla ut suscipit sapien. Morbi et urna elementum, pretium augue non, tristique nulla. Nulla massa tellus, facilisis at fringilla et, rutrum ac libero.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Nam in nisi eleifend, efficitur ligula vel, scelerisque risus. 
    Interdum et malesuada fames ac ante ipsum primis in faucibus. 
    Nam semper diam sodales eros dictum euismod. Duis ut hendrerit leo. Sed iaculis sem ac est porttitor facilisis. 
    In convallis facilisis libero ut interdum. Phasellus scelerisque ex in lacus tempus mollis. Integer scelerisque viverra elit id fringilla. Proin nibh arcu, imperdiet a lacus ac, feugiat interdum sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse ultrices vestibulum orci, a varius quam cursus ut. Nulla ut suscipit sapien. Morbi et urna elementum, pretium augue non, tristique nulla. Nulla massa tellus, facilisis at fringilla et, rutrum ac libero.
</p>

滚动浏览网页时是否可以突出显示单个文本行？与此类似，但是当您滚动时

Is it possible to highlight an individual line of text as you scroll through a webpage? Similar to this but when you scroll

html

javascript

css

jquery

highlight