CSS textarea不会一直跟随文本光标

时间:2019-03-21 12:00:46

标签: css textarea scrollbar padding

我有一个文本区域(Google Chrome),其中包含太多文本,以至于不合适。因此,滚动条现在可见。

当我在textarea的底部书写时,textarea并未考虑到底部的填充量很大。它只会降到我目前的位置。它不会使用填充底部向下推。

有没有解决的办法?我试图通过将填充底部添加到白色容器中来作弊(在本示例中不是)。几乎成功了。它考虑了填充,但是滚动条并没有完全下降,因为文本区域没有一直下降。

.wrap {
  background: #eee;
  padding: 1rem;
}

textarea {
  height: 300px;
  width: 300px;
  padding: 4rem;
  resize: none;
  margin: 0 auto;
  display: block;
  border: none;
}
<div class="wrap">
<textarea spellcheck="false">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a metus mollis, maximus leo a, ultricies mi. Fusce rutrum, felis id vulputate molestie, eros neque commodo purus, blandit ultrices leo urna vel massa. Sed nec pellentesque dolor. Donec a eleifend arcu. Donec sagittis diam vitae vehicula malesuada. Pellentesque laoreet, metus nec pretium interdum, dolor leo lacinia diam, id cursus lorem quam in ipsum. Sed eu sem a ante tristique interdum. Maecenas id urna at massa egestas porttitor. Pellentesque turpis enim, dictum tristique molestie in, pulvinar non est. Integer eu tristique ligula, vitae laoreet quam. Phasellus nec dolor purus. Suspendisse eget nisi lorem. Cras rhoncus ex at mattis tincidunt.

Morbi pulvinar nunc sit amet viverra sollicitudin. Nullam scelerisque erat vitae lectus vestibulum molestie. Pellentesque varius, nisi eget viverra malesuada, magna enim semper arcu, a varius quam sapien quis lacus. Ut et diam erat. Duis molestie elementum justo, et lacinia orci blandit condimentum. Fusce non libero non nunc blandit lacinia. Vivamus quis ornare orci, eu hendrerit enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus luctus ut quam id tempus.

Mauris euismod, augue non eleifend gravida, nulla justo pretium lectus, sit amet consequat sapien nunc id nulla. Quisque vitae nunc consequat, aliquam justo gravida, tempor diam. Nullam eu lobortis arcu. Ut aliquet congue erat non semper. Nullam eget magna ullamcorper, rutrum dolor eu, facilisis orci. Etiam rhoncus at elit eget pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Integer elit purus, feugiat sit amet purus et, finibus congue lacus. Aenean viverra id nibh a dignissim. Nullam dignissim lectus at justo placerat vulputate id at orci. Aenean ante mi, vehicula ut elementum sed, dictum eget libero. Cras commodo sollicitudin odio non pulvinar. Proin non lorem sed diam aliquet mattis non ut ante. Proin volutpat ante quis ullamcorper pellentesque. Etiam lobortis, justo quis dignissim posuere, mauris ex auctor sem, nec auctor tortor ligula eget nunc. Ut imperdiet aliquam risus sed bibendum. Praesent fermentum mauris vitae nibh eleifend posuere. Nulla in euismod nisi, vel dignissim diam.

Suspendisse mi velit, rutrum eu rhoncus ac, faucibus sed erat. Duis ligula augue, lobortis eu ex vel, mattis lobortis sapien. Nullam lacinia cursus sodales. Etiam luctus euismod lectus, vitae bibendum lorem porttitor et. Sed a elementum velit. Etiam tempus malesuada odio, sed luctus quam facilisis ut. Aenean dignissim pretium leo, nec varius metus eleifend sit amet. Sed placerat elit neque, sit amet posuere tellus posuere varius. Aliquam aliquam luctus venenatis. Nam ac pellentesque tortor.</textarea>
</div>

我希望下面的图片能说明我的意思。我是文本区域的最后一个字符。仍然不会一直到文本区域的底部。

enter image description here

0 个答案:

没有答案