Проблема с нажатием кнопки перетаскивания в поле ввода текста также прокручивает родительский элемент, ошибку webkit или функцию?

Там странное поведение, с которым я столкнулся только с веб-браузерами с прошлого года, и это сводит меня с ума.

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

У меня есть структура html, как показано ниже:

<div style="border: 1px solid #000; width:200px;height:200px; overflow:hidden;position:relative">
    <div style="width:200px;position:absolute">
        <p>long line</p>
        <p><input type="text" value=""/></p>
        <p>long line</p>
    </div>
</div>​

Вы можете посетить живой пример в ссылке jdfiddle: jsfiddle

Для меня, используя Chrome (18), когда один клик и перетаскивает текст в поле ввода текста из поля ввода, вы можете "прокручивать" родительский элемент, хотя переполнение CSS установлено на скрытое.

Вы можете попробовать его со скрипки, щелкнув по кнопке "Перетаскивание" правой, верхней, нижней, левой. Делает чудеса.

Более сложная структура html дает больше поведения прокрутки bizzare. Фактически, я могу почти сделать анимацию слайд-шоу с элементами, скользящими и скользящими в последовательности, просто перетащив выделение.

К счастью, этого не наблюдается в firefox.

Кто-нибудь тоже испытывает такое поведение? Предполагается ли это, что это функция вебкита? Кто-нибудь знает, как отключить это поведение "прокрутки"?

Спасибо!

изменить: Благодаря @PhilipK, он нашел связанный пост с решением javascript, которое было сказано ниже. Поскольку моя веб-страница тяжелая с javascript, я хотел бы узнать, есть ли там какие-либо возможные решения CSS.

edit2: Благодаря @tiffon он нашел другое решение для JavaScript. Его решение может быть реализовано в CSS (но с некоторыми ограничениями для событий мыши, поэтому решение CSS является неполным).

ОТВЕТЫ

Ответ 2

Итак, это сработало для меня - см. здесь - в основном слушайте событие onscroll и установите для обоих scrollTop и scrollLeft значение 0.

Ответ 3

Я тоже нашел эту проблему, после небольшого эксперимента я удалил overflow:hidden из одного из родительских div (самого внешнего div, который был прокруткой), и, похоже, он его решил. Я не использовал iframes.

Ответ 4

Я знаю, что это старый поток, но я столкнулся с той же проблемой.

Я создал это исправление:

// DISABLE INPUT DRAG SCROLL (CHROME BUG FIX)
var disableScrollDrag = false;
$('input, select, textarea').unbind('mousedown').mousedown(function(e) {
    disableScrollDrag = true;
    $(this).css('pointer-events', 'none').addClass('disable-scroll-drag');
});

$('body').mousemove(function() {
    if (disableScrollDrag === true) {
        $('.disable-scroll-drag').each(function () {
            $(this).css('pointer-events', 'auto');
        });
        disableScrollDrag = false;
    }
});

Ответ 5

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

Ответ 6

В приведенном выше примере приведена основная идея, но она касается iframe и может быть немного запутанной для реализации на текстовом входе в div, с которым я столкнулся (и оригинальный плакат).

Вот что я сделал, используя jquery;

$('body').on('select', '.my_text_input', function(e) {
        $('.div_that_was_moving_weirdly').scrollLeft(0);
         return false;
    });

Это все еще несовершенно, так как будет прокрутка jarring, а затем отскакивание назад, поскольку событие select, похоже, не срабатывает, пока вы не сделаете выбор. Я пробовал различные мероприятия, но это лучшее, что я мог сделать.