스크롤 후의 텍스트 영역 라인 높이

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

아마 배경에서 그 라인없이이 표시되지 것입니다. 아무도 여기서 무엇이 잘못되었는지 압니까?

솔루션은

나는 해결책을 가지고 있지만,이 작품 왜 나 한테 물어하지 않는 것이 생각합니다. 작은 jQuery를의 도움으로 :

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

예를 332px, 354px에, 텍스트 영역 높이 실험, 잘 작동 보인다.

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

모든 당신이 여기 http://screencast.com/t/pfhNJoUrSQS 볼 수 있듯이 예상대로 작동하기 시작 : (332) (22)와 구분되지 않기 때문에 내가 함께 jQuery를 이상 변경하는 경우, remineder는 2입니다.

Answer 1

22px 라인 높이에서 올바르게 작동하는 것으로 보입니다. 그러나 스크롤을 볼 수 있도록 overflow : hidden 속성을 제거 할 수 있습니다.