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;
}

这是包含textarea的div。 Textarea lineheight设置为22px，当按下enter键时光标位于右侧。（我知道文字在线的中间）。但是当滚动发生时，似乎文本不会滚动22px。查看屏幕投射视频，了解发生了什么。

http://screencast.com/t/RYsPD5DH

如果没有这些背景线，我可能不会看到这个。有人知道这里有什么问题吗？

解

我认为我有解决方案，但不要问我为什么这样做。没有jQuery的帮助：

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

并尝试使用textarea高度，例如332px，354px，看起来效果很好。因为332不用22划分，所以当我用jQuery更改jQuery时，remineder是2，

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

所有内容都按预期开始工作，您可以在此处看到http://screencast.com/t/pfhNJoUrSQS。

Answer 1

它似乎在22px线高度下正常工作;但是，您可能希望删除overflow：hidden属性，以便可以查看滚动。

滚动后的Textarea lineheight

1 个答案: