聚焦文本区域时不希望滚动

Undesired scrolling when focusing textarea

本文关键字：希望 滚动 文本 区域 聚焦      更新时间：2023-09-26

我正在通过websocket聊天，这是另一回事，但当我试图集中聊天框内的文本区域时，会出现一些不希望的滚动。我有这个基本结构，所以你可以点击部分可见的窗口（用户名显示在该区域），窗口就会变得完全可见。

<div class="container"></div>
<div class="content">
    <div class="block"><textarea></textarea></div>
    <div class="block"><textarea></textarea></div>
</div>

假设容器是所有其他内容本身，内容div是聊天窗口容器，块是聊天窗口。

你可以在这个jsfiddle中看到它http://jsfiddle.net/Mhrvf/1/

当我不关注文本区域时没有问题，但当我关注它时，浏览器会尝试滚动所有内容以使文本区域可见，然后每次我打开聊天窗口时，我的身体内容都会滚动窗口底部和文本区域之间的距离。

你可以在这里看到问题http://jsfiddle.net/Cc25T/
每次打开"对话"时，请查看滚动条

我故意把焦点延迟足够的时间，这样动画就结束了，文本区域仍然可见。像这样：http://jsfiddle.net/Cc25T/3/

但是。。。有更好的方法吗？就我个人而言，我不喜欢依赖超时，所以欢迎任何建议：）
我知道我可以使用jQuery animate和它的回调，但我只是不愿意这样做，因为它有多贵，而且使用CSS Transitions时更好的动画支持方式（我知道IE不支持它，我不在乎）

对于转换，您可以使用以下内容通过jQuery检测转换的结束：

$('.block').click(function () {
   $(this).bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
       $(this).children('textarea').focus();
  });
    $(this).toggleClass('show');
});

jsfiddle-http://jsfiddle.net/Cc25T/4/

感谢@Moazzam Khan提供的详细信息，我成功地处理了这一事件。只是如果浏览器处理transitioned简单事件，绑定事件可能会触发两次，所以我使用了一次。除此之外，我还必须验证这个块是否有show类，或者它会一直关注它，从而得到相同的结果。

$('.block').click(function () {
    $(this).one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",
    function () {
        if ($(this).hasClass('show')) $(this).children('textarea').focus();
    });
    $(this).toggleClass('show');
});

你可以在这里看到，效果非常好：http://jsfiddle.net/Mhrvf/3/

相关文章：