スクロール中にdivのテキスト行を強調表示

Question

div内のテキストを強調表示しようとしていますが、強調表示はテキスト内の固定行です。これまでは、2つのdivを使用する非常に単純なソリューションがありました.1つはテキストを格納し、もう1つはハイライトとして動作し、テキストをスクロールするとハイライト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); 
} 

この関数は、ページスクロール時に各行をチェックします。スクロールバーが下端に来るようにするには、margin-bottomを計算しています。