Question

我正在开发一个网站，用户可以在其中创建textareas并随意移动它们在容器div中溢出：隐藏 - 对应于一张纸。

当textarea位于容器的边缘时（即只有部分textarea可见），我的问题就出现了。当用户键入textarea并且插入符号移动到可见部分之外时，容器会滚动显示所有textarea。

通过在这个小提琴中的textarea中的分号后面输入一些内容来尝试： http://jsfiddle.net/PG8SU/2/

<div class="container">
    <p>Some other text</p>
    <textarea>Type:</textarea>
</div>

.container {
    position:absolute;
    width:300px;
    height:500px;
    border:2px solid blue;
    overflow:hidden;
    top: 50px; 
    left:100px;
}
textarea {
    position:absolute;
    display:block;
    left:250px;
    width:100px;
    top:200px;
}

这似乎是大多数浏览器中的默认行为，例如Chrome和IE。我想避免任何滚动容器，只要文本区域保持部分可见，即使用户输入它。

有没有人知道如何做到这一点？

Answer 1

在仔细研究之后，我相信不可能以一种很好的方式做到这一点。

这是一个奇怪的用例，当然，通常你最好将文本区域的宽度设置为$（“。container”）。width（） - $（“textarea”）。position（）.left，但是！如果你确实需要容器外的文本，并且你确实需要它溢出，这将有点工作：

$("textarea").keyup(function() {
    $(".container").scrollTop(0).scrollLeft(0);
}).keydown(function() {
    $(".container").scrollTop(0).scrollLeft(0);
});

我在你的jsfiddle中运行它，它会在你键入时导致屏幕闪烁，但它最终会禁用滚动。这不是理想的，但它是我认为你会找到的最好的。

编辑textarea时，如何防止包含div滚动到它？

1 个答案: