Определить, правильно ли работает overflow: auto (мобильные браузеры)

Я хотел бы определить каким-то «приятным» способом (скорее всего, Modernizr, но неважно), должен ли макет иметь встроенные прокручиваемые области страницы, или же (для некоторых мобильных приложений) должен просто перетекать весь контент как одну прокручиваемую массу.

Конкретный случай - это страница, похожая на «EULA», где есть форма с кнопкой «Я ПРИНИМАЮ» или что-то еще, а затем масса уродливой юридической информации, состоящей только из заглавных букв. На большом экране я хотел бы, чтобы вся форма была видна, поэтому я хотел бы поместить юридические материалы в отдельное поле для прокрутки. Однако на мобильном устройстве это было бы некрасиво (хотя я не эксперт по мобильному ux), поэтому я думал просто удалить все это в строке, чтобы пользователь мог читать текст (LOL) с помощью простых движений для прокрутки, а затем внизу будут прокручиваться кнопки.

Полагаю, я мог бы просто проверить связь с Modernizr, но это не совсем так.

edit, хотя я почти уверен, что то, что я описал, в любом случае, вероятно, принесет пользу удобству использования, дело в том, что я обнаружил, что мои устройства Android не будут обращать внимания на "overflow: auto" на <div> в середине страницы.


mobile javascript scroll media-queries modernizr
person Pointy    schedule 08.02.2012    source источник
comment
Его нет в этом наборе, но многие методы из проекта cft kangax могут быть полезны: kangax. github.com/cft - есть даже один для другой ошибки переполнения.   -  person Alex Sexton    schedule 09.02.2012
comment
Хм, я посмотрю на них, но, возможно, на данный момент (а мои непосредственные цели не нуждаются в особой строгости) проверка на ощупь может быть тем, что нужно сделать. Сенсорная прокрутка - это характеристика, которая действительно является проблемой, независимо от того, есть ли ошибки переполнения или нет. Спасибо, Алекс :-)   -  person Pointy    schedule 09.02.2012

Ответы (2)


arrow_upward
2
arrow_downward

Я использовал подход, основанный на Modernizr.touch и Modernizr.overflowscrolling тестах. Если Modernizr вставляет классы touch и no-overflowscrolling в элемент html в DOM (или просто проверяет напрямую Modernizr.touch и Modernizr.overflowscrolling), я избегаю overflow:auto. Это означает, что устройства Android, которые overflow:auto неправильно обращаются, не получают его.

Это может быть несовершенное решение; могут быть устройства, которые могут обрабатывать overflow:auto, но в этом случае этого не происходит. Но это не совсем конец света, по крайней мере, в моем случае. И, похоже, он правильно работает для всех наиболее распространенных устройств / браузеров.

И это преимущество простоты. У меня уже был загружен Modernizr для других целей.

person Trott    schedule 04.05.2012
comment
как проверить на Modernizr.overflowscrolling ?? - person ghostCoder; 07.05.2012
comment
Вам нужно либо собрать Modernizr с помощью css-overflow-scrolling (вы можете перейти на modernizr.com/download и установите флажок в разделе "Надстройки сообщества") или используйте addTest (), как показано на github.com/Modernizr/Modernizr/blob/master/feature-detects/. - person Trott; 07.05.2012
comment
ОК, сделал это ... но проблема в том, что в нем говорится, что свойство поддерживается, даже если оно не работает :( stackoverflow.com/questions/10483397 / - person ghostCoder; 08.05.2012

arrow_upward
1
arrow_downward

Как уже говорили другие, Modernizr.overflowscrolling проверяет свойство overflow-scrolling css, а не то, может ли устройство прокручивать содержимое в div с помощью overflow: auto.

Фактически, в моем недавнем тестировании Nexus 5 фактически возвращает Modernizr.overflowscrolling как false, поэтому на него нельзя положиться.

Этот очень маленький скрипт (без зависимостей), кажется, включает сенсорную прокрутку для устройств (Android 2.3) без поддержки ... http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/

Ссылка на репо: https://github.com/chrismbarr/TouchScroll

person ourmaninamsterdam    schedule 13.02.2014
comment
Вам лучше включить сценарий здесь, как если бы ссылка изменилась, ваш ответ стал бы недействительным. - person Ean V; 13.02.2014