Div с переполнением: скрытый все еще прокручивается в IE

#jquery #ajax #internet-explorer

Вопрос:

Это веб-сайт ajaxy, который прокручивается. Способ, которым это работает (как будто вы не могли с этим разобраться), заключается в том, что есть два divs. Один в два раза больше ширины окна браузера, а тот, который его содержит, равен ширине окна браузера. У контейнера overflow: скрытый, чтобы не было полос прокрутки.

Однако, даже если в internet Explorer нет горизонтальных полос прокрутки, он все равно прокручивается, если у вас есть панель мыши с горизонтальной прокруткой (как у меня).

Как я могу остановить это поведение?

Спасибо.

1. Какая версия IE вызывает вашу проблему? Я не могу смоделировать проблему с IE7 до IE9.

2. ie8… это повторяет проблему: jsfiddle.net/z4Ept/2 щелкните в синем поле с надписью «один», а затем используйте область прокрутки по горизонтали (слева направо) на вашем трекпаде.

3. Я пока не могу воспроизвести. Возможно, IETester решил эту ошибку IE. У меня нет чистого IE8 для тестирования.

Ответ №1:

Не могли бы вы использовать position: fixed? Потерпите, может показаться, что я отвечаю не на тот вопрос — но фиксированная позиция может привести к отсутствию прокрутки.

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

Или, возможно, вы могли бы реагировать на события javascript keydown / keyup для клавиатуры влево и вправо и предотвратить использование по умолчанию.

Событие прокрутки в jquery могло бы помочь, но я не смог предотвратить это по умолчанию (я думаю, это происходит после прокрутки). http://api.jquery.com/scroll /

Ответ №2:

Я заметил, что у вас не было объявления DOCTYPE. Без DOCTYPE Internet Explorer возвращается в режим «причуд», что приводит к тому, что многие функции CSS работают не так, как ожидалось.

Я бы поместил обозначение DOCTYPE в верхней части документа следующим образом:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Затем, чтобы остановить горизонтальную прокрутку, добавьте ~~position: fixed~~ position: absolute в ваш контейнер slider_currentpage div.

 <div id="slider_currentpage" style="position: absolute; width: 1077px;">

1. положение: исправлено работает, однако теперь сама страница не прокручивается вверх и вниз! :p о боже!

2. @Thomas Clayson Упс, я этого не проверял. Пожалуйста, смотрите редактирование и попробуйте position: absolute.