1

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

当 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）中的默认行为。我想避免容器的任何滚动，并且即使用户输入文本区域，也只是让文本区域保持部分可见。

有谁知道如何做到这一点？

4

1 回答 1

0

在对此进行了一些研究之后，我相信以一种好的方式来做到这一点并不完全可能。

当然，这是一个奇怪的用例，通常最好将文本区域的宽度设置为 $(".container").width() - $("textarea").position().left ， 但！如果您确实需要容器外的文本，并且确实需要它溢出，这将起作用：

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

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

于 2013-08-08T19:57:42.417 回答