Проблема всех времен и народов
 

Как убить скрол-бар но оставить прокрутку

Проблема по сути такова: есть сайт, на нем вылазит большое модальное окошко и держится по центру (position: fixed;)
и все бы то хорошо. но на iPad это окошко не умещается в экран и надо бы проскроллить его содержимое. но вот не задача установив свойство (overflow: auto;) получаем свой долгожданные скролинг. но также получаем и скролл-бар для этого дива. который вообще в дизайн никак не вписывается.

для Ослика решение есть уникальное
BODY{
scrollbar-face-color: #FFF;
scrollbar-arrow-color: #FFF;
scrollbar-track-color: #FFF;
scrollbar-shadow-color: #FFF;
scrollbar-highlight-color: #FFF;
scrollbar-3dlight-color: #FFF;
scrollbar-darkshadow-Color: #FFF;
}
но на iPad то Ослика нет :-D

Ответ: Проблема всех времен и народов
 

Добрый день. Наш FED на очередном проекте для подобной задачи использовал JavaScript для определения размеров страницы. По-моему, JavaScript включен практически везде, посему данное решение имеет право на существование.

Ответ: Проблема всех времен и народов
 

Какое же javaScript решение посоветуете? сжиматься то она у меня сжимается скриптом а как её скролить причем на iPad-е, без скрол-бара

Ответ: Проблема всех времен и народов
 

Поясни вот эти моменты:
Страница никогда не скролится вообще, или там есть скроллинг, но по центру нужно иногда модальное окошко?

Если первое, тогда не используй fixed, а юзай absolute.
Если тебе нужно установить объект по центру экрана, то используй JavaScript, для таких целей jQuery будет очень удобным:
$(window).innerWidth() и $(window).innerHeight() - получают размеры экрана.
Далее имея размеры блока, позиционируешь его как нужно (по центру, простая математика).
При этом позиционируй так, чтобы этот элемент не выходил влево и вверх за пределы окна, т.к. тогда будет обрезаться. Для позиционирования, используй margin или top / left. (я бы юзал top / left, а margin оставил бы, т.к. может пригодиться для дизайна).
Элемент (модальное окошко), должно иметь css аттрибут display:inline-block.
Далее можно играться со скриптом, т.к. там есть евенты: touchstart, touchmove, touchend - их отлавливаешь, и используешь данные из них, для ручного скроллинга блока.
Гугл знает много.

Второй вариант - это без скриптов вообще, а только CSS, но с использованием @media.
Суть такова что в CSS3 есть такая фича, что можно определить разные CSS правила с учётом условия. Например если разрешение окна меньше чем 600 - то применять стили для мелких разрешений, иначе оставить стандартные - для десктоп экрана.
Вот почитай, там и примеры есть: http://coding.smashingmagazine.com/2...-your-website/

Ты затронул тему, которая называется: Responsive Design.

Я советую это дело решать CSS'ом, а не JS'ом, т.к. это шустрее и более стабильно.

Ответ: Проблема всех времен и народов
 

сама страница тоже скролится. СПС буду пробовать играться с CSS :)

Ответ: Проблема всех времен и народов
 

Так тебе содержимое блока скроллить нужно, или страницу?
Ты больше инфы дай.
Если содержимое блока, то только JS, используй функции по работе с событиями: touchstart, touchmove, touchend.

Ответ: Проблема всех времен и народов
 

на рисунке: то что черное это iPad то что серое это модальное окно.
Модальное окно всегда по центру.
на рисунке показано что оно вылазит за пределы экрана. на самом же деле вылазит за пределы только его содержимое. само окно принимает высоту экрана. и появляется скролл-бар для этого окна. так вот этого сролбара, надо сделать невидимко

Ответ: Проблема всех времен и народов
 

В стилях для модального окна выставляешь:
height:100%;
max-height:512px; - это например его постоянный размер.
overflow:hidden; - это сделает так чтобы ни скролл бара не появлялось, ни скроллить нельзя было.

Далее пишешь JS, где отлавливаешь touch евенты, и работаешь с ними.
Гугл полон этого, для примера одна из первых ссылок из гугла: http://forrst.com/posts/jQuery_iPad_...ger_scroll-B30
Тут с использованием jQuery.