Выделение строки текста в div при прокрутке

Question

Я пытаюсь выделить какой-то текст в div, причем выделение является фиксированной строкой в ​​указанном тексте. Пока у меня очень простое решение, в котором используются два div, один из которых содержит текст, а другой действует как подсветка, и когда вы прокручиваете текст, он будет проходить через div выделения.

HTML выглядит следующим образом:

<div id="test"> 
    text... 
</div> 
<div id="highlight"></div> 

CSS является:

#highlight { 
    position: fixed; 
    top: 50%; 
    width: 100%; 
    background-color: #ccff00; 
    height: 30px; 
    opacity: 0.6; 
} 
#test{ 
    position: absolute; 
    font-size: 30px; 
    top: 50%; 
} 

A demo of it can be found here

мне было интересно, если кто-нибудь знает, как сделать так, чтобы прокрутка текста может быть сделано способ, когда пользователь прокручивает, следующая строка становится подсвеченной. В настоящее время он прокручивается нормально, поэтому подсветка может пропустить линию или не выделять полную строку. Кроме того, мне было интересно, как лучше всего будет прокручивать текст до конца. Добавил бы маржу того же размера, что и смещение в верхней части? Альтернативные решения для любого из них также будут оценены.

Answer 1

Попробуйте добавить прослушиватель событий в окно прокрутки. Затем вычислите смещение, взяв scrollY % line-height и установите верхнее поле выделения на отрицательное значение этого значения.

JavaScript ниже:

var highlight = document.querySelector("#highlight"); 

window.addEventListener('scroll', function(e){ 
    var y = window.scrollY; 
    var offset = y % 30; 
    highlight.style.marginTop = - y % 30 + "px"; 
}); 

See Working Fiddle

Answer 2

Не уверен, если это https://jsfiddle.net/ok0x3apo/6/ является то, что вы ищете

Вы можете видеть, что я remodifying введенного текста, чтобы получить линию по линии подсветки, как страница прокручивается.

var el = document.getElementById("text"), 
content = el.innerHTML.replace(/ |^\s+|\s+$/g,""), 
lines = content.split(/\./); 
var html = ""; 
for(var i in lines){ 
    html+="<p class='clear_display' id='id_"+i+"'>"+lines[i]+".</p>"; 
}; 
document.getElementById("text").innerHTML=html; 

Вы можете внести изменения в класс «clear_display» о том, как вы предпочитаете иметь текстовый блок.

function calledEveryScroll() { 
     var scrollPosition = $(window).scrollTop(); 
     for(var i in lines){ 
      var currentSection = document.querySelector("#id_"+i+""); 

      var sectionTop = currentSection.offsetTop; 
     if (scrollPosition<=0){ 
      $(".clear_display").removeClass('active'); 
       document.querySelector("#id_0").className += " active"; 
     } 
      if (scrollPosition >= sectionTop-50) { 
       $(".clear_display").removeClass('active'); 
       if (!$(currentSection).hasClass('active')) { 
        $(currentSection).addClass('active'); 
       if(previous){ 
       if(currentSection.offsetTop==previous.offsetTop){ 
        $(previous).addClass('active'); 
       } 
       } 
       var previous = currentSection; 
       } 
       //return false; 
      } 
    } 
    } 
function resizing(){ 
     var offset =100; 
var bottom = $(window).height()-offset; 
    $('#text').css('margin-bottom',bottom); 
} 

Эта функция проверяет каждую строку, когда страница scrolls.For свитка, чтобы достичь дна я расчетливый маржинального-bottom.Hope это помогает.