Question

我正在通过websockets进行聊天，这是另一个故事，但是当我尝试将textareas聚焦在聊天框中时，我得到了一些不受欢迎的滚动。我有这个基本结构，所以你可以点击部分可见的窗口（用户的名字显示在该区域），窗口变得完全可见。

<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/

中看到它

当我没有聚焦textarea时没有问题，但是当我关注它时，浏览器会尝试滚动所有内容以使textarea可见，然后每次我将聊天窗口抬起来时，我的身体内容会滚动显示窗口底部和textarea之间的距离。

您可以在此处查看问题http://jsfiddle.net/Cc25T/
每次打开“对话”时都要查看滚动条

我坚持将焦点推迟到足够的时间，以便动画结束并且textarea仍然可见。像这样：http://jsfiddle.net/Cc25T/3/

但......有更好的方法吗？我个人不喜欢依靠超时，所以欢迎任何建议:) 我知道我可以使用jQuery动画和它的回调，但我只是不愿意，因为它有多昂贵，以及使用CSS Transitions时更好的动画支持方式（我知道IE不支持它，我不在乎）

Answer 1

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

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

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

Answer 2

感谢@Moazzam Khan提供的详细信息，我设法处理了这个事件。如果浏览器处理transitionend简单事件，绑定事件可能会触发两次，所以我使用了一个。除此之外，我必须验证块是否具有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/

聚焦textarea时不受欢迎的滚动

2 个答案: