Поддержка браузера событий onfocus с возможностью прокрутки Div

Похоже, что некоторые браузеры позволяют прокручиваемому элементу div получать фокус, и тогда этот элемент имеет фокус, и пользователь может использовать клавиши со стрелками и страницу вверх/вниз. Мне интересно узнать все, что я могу об этой функциональности, потому что моя компания пытается полностью соответствовать 508.

Мой вопрос: какие браузеры поддерживают событие фокуса на прокручиваемом элементе?

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

Любая другая информация/советы, которые вы можете дать здесь о том, как сделать мой собственный прокручиваемый элемент div полностью совместимым с 508, были бы замечательными.

Сейчас я рассматриваю следующее:

  1. Сосредоточение внимания на прокручиваемом элементе позволяет использовать клавиши со стрелками вверх/вниз и страницы/вверх вниз... Какие браузеры? Это все браузеры?
  2. Средняя кнопка мыши должна работать (вызывает быструю прокрутку движениями мыши)
  3. Колесико мыши должно работать
  4. Если сосредоточиться на чем-то внутри прокручиваемого элемента, который обычно не использует клавиши со стрелками (например, ввод или текстовое поле), тогда клавиши со стрелками/страница вверх/вниз будут прокручивать div

Есть ли другой способ переместить прокрутку, которую я забыл?


javascript html section508
person codefactor    schedule 07.02.2013    source источник
comment
Обратите внимание, что мой вопрос связан с DIV с событием onfocus: <div onscroll="console.log('it is supported')" style="overflow:auto;height:100px;">   -  person codefactor    schedule 08.02.2013

Ответы (2)


arrow_upward
1
arrow_downward

Как вы узнали, <div> изначально не фокусируется. Однако вы можете сделать его фокусируемым, добавив tabindex="0" к div; <div tabindex="0" style="overflow:auto;height:100px;">. Это должно быть распознано браузерами вплоть до IE7.

Единственный известный мне браузер, который позволяет вам перекрывать полосы прокрутки, — это IE, если вы не делаете это во флеш-памяти, может быть, в каком-то JS.

person Ryan B    schedule 08.02.2013
comment
В моем коде я не переполняю полосы прокрутки - на самом деле я просто скрываю полосы прокрутки, используя отрицательное поле, а затем абсолютно позиционирую свои собственные полосы прокрутки, которые с помощью javascript обновляют положение прокрутки прокручиваемого div. Кроме того, после некоторых экспериментов я обнаружил, что div без tabindex изначально фокусируется в FireFox Latest (не знаю, в какой версии он был добавлен). И похоже, что IE и Chrome его не поддерживают. Я не знаю о сафари. jsfiddle.net/VXsGw — щелкните внутри панели результатов, а затем нажмите клавишу Tab, чтобы сфокусируйте div! - person codefactor; 08.02.2013
comment
Я не очень хорошо знаком с tabindex=-1, но могу сказать, что с помощью этой скрипты jsfiddle.net/ VXsGw/1 в IE 9 вы можете видеть, что при перемещении по кнопкам пропускается прокручиваемый div, что наводит меня на мысль, что либо что-то не так, либо ваш ответ неверен. - person codefactor; 08.02.2013
comment
Извините, я устал. Я отредактировал свой ответ, должно быть 0, а не -1, jsfiddle.net/VXsGw/3 - person Ryan B; 08.02.2013

arrow_upward
0
arrow_downward

см. этот веб-сайт для списка событий, которые поддерживаются в браузерах http://www.quirksmode.org/dom/events/index.html

person mohammad mohsenipur    schedule 07.02.2013
comment
Я ничего не вижу о событии onfocus в DIV. Конечно, onfocus работает с INPUT, BUTTON и т. д. Но мой вопрос конкретно касается DIV с переполнением: auto. - person codefactor; 08.02.2013
comment
@codefactor это событие работает над DIV. Я много тестирую в своем проекте. - person mohammad mohsenipur; 08.02.2013