Нежелательная прокрутка при фокусировке textarea

Я занимаюсь чатом через websockets, это еще одна история, но я получаю некоторую нежелательную прокрутку, когда пытаюсь сфокусировать текстовые поля внутри ящиков чата. У меня есть эта базовая структура, поэтому вы можете щелкнуть частично видимые окна (имя пользователя отображается в этой области), и окна становятся полностью видимыми.Нежелательная прокрутка при фокусировке textarea

<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, и это обратный вызов, но я просто не хочу, из-за того, насколько это дорого и как улучшить анимацию поддержка при использовании CSS Transitions (я знаю, что IE не поддерживает его, я не забочусь)

источник

2013-07-30 kevLinK

вы пытались JQuery анимации с полным обратным вызовом? –

@MoazzamKhan, пожалуйста, прочитайте снова последнюю часть, я не хочу использовать анимацию против переходов CSS. – kevLinK

может быть, вы получите что-то полезное здесь - http://stackoverflow.com/questions/2794148/css3-transition-events –

Благодаря подробной информации от @Moazzam Khan мне удалось o обрабатывать событие. Дело только в том, что событие bind может срабатывать дважды, если браузер обрабатывает простое событие перехода, поэтому я использовал его. Кроме того, мне пришлось проверять, был ли в блоке класс 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-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

ответ

Смежные вопросы