2

我正在通过 websockets 进行聊天，这是另一个故事，但是当我尝试将文本区域集中在聊天框中时，我得到了一些不希望的滚动。我有这个基本结构，因此您可以单击部分可见的窗口（用户名显示在该区域中）并且窗口变得完全可见。

<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可见，然后每次我打开聊天窗口时，我的正文内容都会滚动一个距离窗口底部和文本区域。

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

我将焦点延迟了足够长的时间，因此动画结束并且文本区域仍然可见。像这样：http: //jsfiddle.net/Cc25T/3/

但是……有没有更好的办法？就我个人而言，我不喜欢依赖超时，所以欢迎提出任何建议:)
我知道我可以使用 jQuery animate 并且它是回调，但我只是不喜欢，因为它有多昂贵，以及更好的动画支持的方式何时使用 CSS 过渡（我知道 IE 不支持它，我不在乎）

4

2 回答 2

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/

于 2013-07-30T20:56:01.100 回答
1

感谢@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/

于 2013-07-30T21:15:36.560 回答