聚焦textarea時不希望的滾動

我正在通過websockets進行聊天，這是另一個故事，但是當我嘗試將聊天框中的textareas聚焦時，我收到了一些不希望的滾動。我有這個基本結構，所以你可以點擊部分可見的窗口（用戶名稱顯示在該區域），窗口變得完全可見。聚焦textarea時不希望的滾動

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

假設容器是所有其他內容本身，內容div是聊天窗口容器，塊是聊天窗口。

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

有，當我不注重textarea的沒有問題，但是當我專注它的瀏覽器嘗試滾動的所有內容，使文本區域可見，則每次這個的jsfiddle我把聊天窗口拉上來，我的身體內容滾動窗口底部和textarea之間的距離。

你可以看到這裏的問題http://jsfiddle.net/Cc25T/
看看滾動條我攻入延遲的焦點足夠的時間，使動畫結束，textarea的是又看到你打開一個「對話」每次

。像這樣：http://jsfiddle.net/Cc25T/3/

但是...有沒有更好的方法？我個人不喜歡依靠超時，所以任何建議都歡迎:)
我知道我可以使用jQuery的動畫和它的回調，但我只是preffer不，因爲它是多麼昂貴，以及更好的動畫方式支持使用CSS過渡（我知道IE不支持它，我不在乎）時

來源

2013-07-30 kevLinK

你嘗試jQuery的完整的回調動畫？ –

@MoazzamKhan請再讀一遍最後一部分，我不想使用動畫對CSS轉換 – kevLinK

可能你會得到一些有用的東西 - http://stackoverflow.com/questions/2794148/css3-transition-events –

由於@Moazzam Khan提供的詳細信息，我管理了t o處理事件。只是如果瀏覽器處理transitionend簡單事件，綁定事件可能會觸發兩次，所以我使用了一個。除此之外，我必須驗證塊是否具有展示類，否則它將始終關注它，導致相同的結果。

$('.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-30 21:15:36 kevLinK

對於過渡您可以使用以下通過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-30 20:56:01

聚焦textarea時不希望的滾動

回答

相關問題