オーバーフローした場合、同じ要素には異なるscrollHeightsがあります。原因は何ですか？どうすれば修正できますか？

Question

私は、プラグインを作成し、一定の時間にの内容で<p>を入力します。プラグインはの下に<p>を配置し、要素のスタイルを変更して "boxes"が同じになるようにします。また、<textarea>の背景とテキストはtransparentと定義されており、<p>の内容を見ることができます。

理想的には、要素とその内容は、常に互いに重なり合っています。そして、ほとんどの場合、彼らはそうします。ただし、両方の要素をスクロール可能にすると、動的なブレークが発生します。

var $shadowParagraphObj = $("#shadowParagraph"); 
 
var $contentTextAreaObj = $("#contentTextArea").scroll(scrollShadowParagraph); 
 

 
function scrollShadowParagraph(event) 
 
{ 
 
    var textAreaScrollLeft = $contentTextAreaObj.scrollLeft(); 
 
    var textAreaScrollTop = $contentTextAreaObj.scrollTop(); 
 

 
    if($shadowParagraphObj.scrollLeft() != textAreaScrollLeft) 
 
    $shadowParagraphObj.scrollLeft(textAreaScrollLeft) 
 

 
    if($shadowParagraphObj.scrollTop() != textAreaScrollTop) 
 
    $shadowParagraphObj.scrollTop(textAreaScrollTop) 
 
} 
 

 
var intervalId = setInterval(function(){$shadowParagraphObj.html($contentTextAreaObj.val())}, 100);

#containerDiv { 
 
    position: relative; 
 
    left: 50%; 
 
    margin-left: -250px; 
 
    width: 510px; 
 
    height: 200px; 
 
} 
 

 
#shadowParagraph, #contentTextArea { 
 
    width: inherit; 
 
    height: inherit; 
 
    overflow: scroll !important; 
 
    padding: 4px; 
 
    border : none; 
 
    outline: none; 
 
    margin: 0px; 
 
    white-space: pre-wrap; 
 
    word-wrap: pre-wrap; 
 
    font: 1em Arial, sans-serif; 
 
} 
 

 
#shadowParagraph { 
 
    position: absolute; 
 
    z-index: 0; 
 
    background: white; 
 
    color: blue; 
 
} 
 

 
#contentTextArea { 
 
    position: relative; 
 
    z-index: 1; 
 
    background: transparent; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='containerDiv'> 
 
    <p id='shadowParagraph'></p> 
 
    <textarea id='contentTextArea'></textarea> 
 
</div>

溢れ：コードこれは、2つの要素をここ

（<textArea>のscrollHeightが<p>よりも大きい）のscrollHeightの違いによるものです<textarea>で問題が発生するはずです（<textarea>のテキストは、問題を見やすくするために色が付けられています）。

scrollHeight値の間にこの不一致の原因となっているプロパティを宣言するのを忘れましたか？もしそうなら、彼らは何であり、私はそれらを宣言すべきですか？そうでない場合は、2つの要素のscrollHeightが常に等しいことを確認する方法はありますか？

Answer 1

さて、.replace(/\n\r?g, '<br />')を使用して更新された値を変換すると、改行はhtml改行に変換されます。さらに、htmlは改行文字である<br />の改行を無視する傾向があるため、最後の改行がレンダリングされるように、値に<br />を追加してください。一緒にこれを入れて

のようなものになります。また

var textAreaHTML = $myTextArea.val().replace(/\n\r?g, '<br />')+'<br />'; 

を、私はあなたのテキストエリアの値を更新することをおすすめしますと.keyup()イベント、.keypress()イベント、または.on('keyup keypress', function() {...})を使用して、両方のイベントの位置をスクロールします。問題のコードを記載してくださいthis jsFiddle example