Избегать нежелательной прокрутки, вызванной навигацией клавиатуры в IE? - PullRequest
Новая
       34

Избегать нежелательной прокрутки, вызванной навигацией клавиатуры в IE?

3 голосов
/ 11 января 2011

У меня есть HTML-страница, на которой есть

, который содержит контент, который шире, чем он сам;избыток становится невидимым с помощью стиля «overflow: hidden;».

В этом содержании могут быть ссылки.В IE8 (но не в Firefox 3.6), если вы используете клавиатуру (т. Е. Клавишу табуляции) для установки фокуса на ссылку, обрезанную по правому краю, IE будет прокручивать весь div влево достаточно далеко, чтобы сделать всю ссылку видимой.(То же самое происходит со ссылками слева, когда они получают фокус, если div уже прокручен влево - он прокручивает содержимое вправо, чтобы сделать всю ссылку видимой.)

Я могу попытаться скрыть этонежелательная прокрутка путем установки значения scrollLeft на div, когда он выходит из строя - jQuery делает это легко.Но я бы предпочел, если возможно, использовать стиль или настройку, чтобы в первую очередь предотвратить прокрутку.Как уже упоминалось, Firefox не прокручивает частично обрезанную ссылку, когда она получает фокус.В идеале IE должен вести себя так же.

Пример HTML ниже.В IE, используйте Tab (или Shift + Tab), чтобы установить фокус на каждую ссылку по очереди, чтобы увидеть, как содержимое бокса сдвигается вбок. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Demo of undesired scrolling</title>
</head>
<body>
    <a href="http://www.w3.org">Before</a>
    <div style="width: 400px; border: 1px solid gray; overflow: hidden;">
        <div>
            <div style="width: 450px; text-align: center;">
                <a href="http://www.w3.org">Somewhere in the middle</a>
            </div>
            <div style="width: 450px; text-align: left;">
                <a href="http://www.w3.org">Over on the left</a>
            </div>
            <div style="width: 450px; text-align: right;">
                <a href="http://www.w3.org">Over on the right</a>
            </div>
        </div>
    </div>
    <a href="http://www.w3.org">After</a>
</body>
</html>

Заранее благодарим за любую информацию!

Ответы [ 2 ]

6 голосов
/ 10 июня 2011

Я не думаю, что есть какой-то "естественный" способ предотвратить прокрутку, но у вас есть несколько вариантов использования JS:

Вариант № 1

  • Проверьте, не отображается ли ссылка в событии onfocus.
  • Если он не виден, либо просто размыть его, либо лучше найти следующую действительную ссылку и сфокусировать ее. Демо: http://jsfiddle.net/cwolves/eHTVV/2/
  • Если ваши ссылки частично видны, это будет вести себя странно, поскольку их нельзя будет выбрать.

Вариант № 2

  • сбросить позицию прокрутки в событии onscroll контейнера div во всех ситуациях, кроме прокрутки с помощью jQuery.

  • Вам нужно будет сохранить переменную с правильной позицией прокрутки в событиях анимации jquery, например ::

    var correctXOffset = 0;
myDiv.animate({ left: 500 }, function(){
    correctXOffset = this.offsetLeft;
});

  • Демо: http://jsfiddle.net/eHTVV/3/

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

Вариант № 3

  • Удаляйте невидимые ссылки из последовательности индексов табуляции всякий раз, когда ваш div завершает прокрутку, например ::

    myDiv.animate({ left : 500 }, function(){
    $('.invisiblePage a').prop('tabIndex', -1);
    $('.visiblePage a'  ).removeProp('tabIndex');
});

  • Как и в варианте № 1, ссылки станут недоступны для выбора

Вариант № 4

  • «Обрезать» содержимое с помощью CSS: clip : rect(0px 400px 400px 0px);
  • Контейнер должен располагаться абсолютно
  • несколько сложный JS должен настроить это свойство
  • демо: http://jsfiddle.net/cwolves/eHTVV/5/
0 голосов
/ 13 января 2011

Разве вы не можете просто разместить все внутри содержимого div?

Я исправил проблему прокрутки таким образом ... заменив это: 

        <div style="width: 400px; text-align: right;">

на строку 16 в вашем примере.*

это помогает?

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

Нет похожих вопросов

...