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

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在开发一个网站，用户可以在其中创建textareas并将它们移动，因为它们像一个容器div内的溢出：hidden - 对应于一张纸。编辑textarea时，如何防止包含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浏览器的默认行为。我想避免任何滚动的容器，并且即使用户输入textarea也只能保持部分可见。

有没有人有这样做的想法？

回答：

在仔细研究了一下之后，我相信这样做不是完全可行的。 （）。（“。container”）。width（） - $（“textarea”）。position（）。这个是一个奇怪的用例，当然，通常你最好将文本区域的宽度设置为$ （）.left，但！如果确实需要在容器外的文本，你需要它溢出，这将这类工作：

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

我在你的jsfiddle跑了这一点，它会导致屏幕，当你键入闪烁，但它最终会禁用滚动。这并不理想，但这是我认为你会找到的最好的。

以上是 编辑textarea时，如何防止包含div滚动到它？ 的全部内容， 来源链接： utcz.com/qa/263905.html

回到顶部