Textarea lineheight滾動後

我想創建類似quicknote的東西，起初我認爲這將是一件容易的事情。Textarea lineheight滾動後

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，當按下回車鍵時光標位於正確的位置。（我知道文字在線的中間）。但是當滾動發生時，似乎文字不滾動爲22px。看看屏幕輪播視頻，看看發生了什麼。

http://screencast.com/t/RYsPD5DH

我可能不會看到這個沒有背景的那些行。有人知道這裏有什麼問題嗎？

SOLUTION

我認爲我有解決辦法，但不要問我爲什麼這個工程。幾乎沒有jQuery的幫助：

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

和實驗textarea高度，在例如332px，354px，它似乎效果很好。因爲332不是22分，remineder是2，當我在上面jQuery的改變有：

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

都開始像預期的那樣，你可以在這裏看到http://screencast.com/t/pfhNJoUrSQS工作。

來源

2012-03-29 savgoran

你有沒有嘗試查看它沒有背景圖像呢？ – huzzah 2012-03-29 20:26:25

工作正常沒有問題[檢查這裏]（http://jsfiddle.net/mtariq/p5m74/1/）也從「.quicknote textarea」脫掉'overflow：hidden;'看看滾動效果 – 2012-03-29 20:37:08

@tariq不起作用，你沒有看到這個問題，因爲你沒有背景。 – savgoran 2012-03-29 20:39:53

它看起來正常工作與一個22px線高度;但是，您可能想要刪除overflow：hidden屬性，以便查看滾動。

來源

2012-03-29 20:39:39 huzzah

滾動或不滾動。 – savgoran 2012-03-29 20:42:00

OIC重新閱讀您的文章並再次觀看視頻後，我終於明白您的意思了，您的IMAGE不會滾動。請稍後再描述一下！ :)讓我考慮一下。 – huzzah 2012-03-29 20:45:10

不，圖像不應該移動，背景是靜態的。正如你在視頻中看到的，滾動textarea不滾動22px，文本被放在行下。 – savgoran 2012-03-29 21:03:16

Textarea lineheight滾動後

回答

相關問題