テキストエリアのlineheightスクロール

Question

後、私はquicknoteのようなものを作りたいと最初に私はそれが簡単な作業になりますと思いました。ここで

HTML

<div class="quicknote"> 
    <textarea></textarea> 
</div> 

CSS

.quicknote 
{ 
    width: 308px; 
    height: 400px; 
    background: url('../images/note-bg.gif') 0 0; 
    outline: none; 
    padding: 10px; 
} 

.quicknote textarea 
{ 
    border: 0; 
    width: 100%; 
    height: 100%; 
    resize: none; 
    background: transparent; 
    outline: none; 
    font: 12px/22px Arial, sans-serif; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    border: 1px dashed #aeaeae; 
    text-align: baseline; 
} 

は、テキストエリアが含まれているdiv要素です。 Textarea lineheightが22pxに設定されています。これを押すとカーソルが正しい場所に配置されます。 （私はテキストがラインの中央にあることを知っています）。 しかし、スクロールが発生すると、テキストが22ピクセルでスクロールされないようです。何が起こったかを見るためにスクリーンキャストビデオをチェックしてください。

http://screencast.com/t/RYsPD5DH

私はおそらく背景にそれらのラインなしでこれを見ていないでしょう。誰が何が間違っているのか分かっていますか？

SOLUTION

は、私は解決策を持っていると思いますが、これは動作しますなぜ私に聞かないでください。少しのjQueryの助けを借りて：

$textarea.on('scroll', function() { 
    $textarea.scrollTop($textarea.prop("scrollHeight")); 
}) 

と例332px、354pxで、テキストエリアの高さを試して、うまく機能しそうです。すべてが期待通りにあなたがここにhttp://screencast.com/t/pfhNJoUrSQSを見ることができるように作業を開始

$textarea.on('scroll', function() { 
    $textarea.scrollTop($textarea.prop("scrollHeight")+2); 
}) 

：332が22に分割されていないので、reminederは、私はjQueryの上に変更されたとき、2です。

Answer 1

22pxの行の高さで正しく動作しているようです。ただし、オーバーフロー：隠しプロパティを削除して、スクロールを表示することができます。