Переполнение скрытого и прокрутка ввода текста в Google Chrome

Вот мой фрагмент кода:

http://jsfiddle.net/7CuBV/6/

Если я щелкаю и перетаскиваю текстовое поле ввода, я получаю div с переполнением: скрытая прокрутка, как при переполнении: авто. Если я установил переполнение: скрытый в div, я хочу, чтобы прокрутка была заблокирована, как это делают другие браузеры.

Любопытно, что если я установлю padding: 0px в поле ввода, проблема с Chrome больше не будет возникать.

Это ошибка Google Chrome? Любой обходной путь, чтобы заставить это работать без использования Javascript?

РЕДАКТИРОВАТЬ: Такое поведение происходит в Safari 5 тоже. Может быть, это проблема Webkit.

 danorton22 окт. 2012 г., 21:13
Та же проблема здесь, за исключением того, что обходной путь не работает для меня. :-(

Ответы на вопрос(4)

но не смог заставить его работать с несколькими полями, mouseup не сработало бы после того, как я установил события указателя в значение none.

Таким образом, установка входных «указателей-событий» Ни один из них не решает проблему прокрутки в скрытый контент, но мешает пользователю сфокусировать поле с помощью событий мыши. Но я заметил, что нажатие на метку все равно будет работать, чтобы сфокусировать поле.

Поэтому я сделал этот обходной путь, который работает, потому что все мои поля вложены в div. По сути, нажатие на поле не фокусирует его, но все еще передает событие его родителю:

    $('label').click(function(e){
    e.stopPropagation();
});
$('input[type="text"], textarea').parent().click(function(){
    $(this).find('label').click();
});
$('input[type="text"], textarea').on({
    mousedown:function(){
        $(this).css('pointer-events', 'none');                  
    }
});

Проблема в том, что он не позволяет вам выделять текст внутри поля, если вы не используете клавиши со стрелками на клавиатуре.

Решение Вопроса

Вот что исправило это для меня:

input:active { pointer-events:none; }

Благодаряhttps://stackoverflow.com/users/498031/vken за то, что указал на этот похожий вопрос:Проблема с click-drag-select в поле ввода текста также прокручивает родительский элемент, ошибку webkit или функцию?

UPDATE 2013-11: pointer-events:none решает проблему, но имеет множество недостатков. Лучший обходной путь для этой проблемы - убедиться, что у вас нет переполненного контента, как в & quot;overflow:hidden Контейнер не больше указанного контейнера. Если вы хотите прокрутить контент с помощью JavaScript, задайте для него ширину и высоту = 0, пока он скрыт, и измените его размер только непосредственно перед его перемещением (это легко сделать с помощью анимации по ключевым кадрам или синхронизированных переходов)

ВАЖНО: я столкнулся со странным случаем с<input type=file> поле в Chrome, которое не должно было вызывать проблем переполнения, так как я изменил его размер с помощью CSS - dev-tools подтвердили это, НО: после просмотраShadow-DOM Я понял, что собственные кнопки Chrome & quot; переполнило фактическое поле ввода и, следовательно, привело к увеличению всего контейнера.

How to show Shadow-DOM: Если все выглядит правильно, но это все еще проблема, перейдите в Chrome Dev-Tools, нажмите кнопку «Настройки» в правом нижнем углу. На вкладке «Общие» в разделе «Элементы» это опция для включения "Показать Shadow DOM". Это даст вам полную картину того, что происходит ... Хотя в большинстве случаев это просто добавляет еще один уровень сложности, здесь это действительно полезно!

 03 нояб. 2013 г., 02:21
Вау, это здорово!
 fuegod19 авг. 2013 г., 14:43
Большое спасибо. Это именно то, что мне было нужно ;-)
 04 нояб. 2013 г., 11:02
у него есть свои недостатки - я дам вам это! хотя ваш пример немного не по теме, так как он не включаетINPUT поле
 04 нояб. 2013 г., 11:18
@JohnKurlak Я обновил свой постmy новейшие выводы ;-)
 03 нояб. 2013 г., 21:16
К сожалению, пользователь больше не может прокрутить вниз, выделив мышью это решение. Плюс, у этого есть другие значения, когда дело доходит до прослушивания событий в JS. Пожалуйста, смотрите мой ответ для более надежного решения.

l». событие, это отключит прокрутку:

var div = $(".overflow-hidden");
div.scroll(function() { div.scrollTop(0).scrollLeft(0); });

что я получил, чтобы работать лучше всего, используетpointer-events:none;, Единственный способ, которым я мог применить это, было установитьdisplay: none;, В противном случае это было проигнорировано, поэтому короткое мигание.

http://jsfiddle.net/7CuBV/21/

var tx = document.getElementById('tx'),
    bod = document.body;

tx.addEventListener('mousedown', tx_ondown);

function tx_ondown() {
    bod.addEventListener('mousemove', b_onmove);
    bod.addEventListener('mouseup', b_onup);  
    bod.addEventListener('mouseout', b_onup);    
}

function b_onmove() {
    tx.style.pointerEvents = 'none';
    tx.style.display = 'none';

    setTimeout(function() {
        tx.style.display = '';
    }, 0);
    bod.removeEventListener('mousemove', b_onmove);
}

function b_onup() {
    if (tx.style.pointerEvents === 'none') {
        tx.style.pointerEvents = '';
    } else {
        bod.removeEventListener('mousemove', b_onmove);
    }
    bod.removeEventListener('mouseup', b_onup);
    bod.removeEventListener('mouseout', b_onup);        
}​
 18 апр. 2013 г., 16:13
Мне нравится ваше решение.
 19 апр. 2013 г., 08:11
@DoubleYo Спасибо

Ваш ответ на вопрос