О полосе прокрутки

Сейчас я покажу вам особую, скроллбарную магию. Шучу конечно, ибо о полосе прокрутке (скроллбаре) я хочу сказать совсем немного, и эта заметка будет небольшой. Статья посвящена прежде всего вертикальной полосе.

Некоторые дизайнеры, не любят делать резиновые дизайны, ссылаясь на то, что сделать фиксированный размер проще, и это действительно так. Мы привыкли называть резиновым — дизайн, который растягивается по высоте и ширине, потому что у всех разная ширина экрана и этот дизайн растягивается под любую из них. Однако, правильное растягивание по высоте — тоже является проблемой. Поэтому самый простой дизайн — дизайн не растягивающийся ни по ширине, ни по высоте. Но как же быть с контентом? Ведь количество контента на странице нельзя сделать фиксированным и он всё равно начнёт вылезать вниз?

Когда меня спрашивают как сделать чтобы контент страницы не вылазил за пределы блока, а например скроллировался, я указываю на свойство

overflow:auto;

Теперь расскажу чем это чревато для пользователя:

• Во-первых, пользователь не привык что полоса прокрутки контента страницы будет в другом месте. Смотри статью «Привычки пользователя».
• Во-вторых, в полосу у границы экрана гораздо легче попасть. Смотри статью «О границах экрана».
• В-третьих, на скроллируемом участке, по-умолчанию не работает колёсико мыши или клавиатурная навигация, только при переходе в заданную область.
• Сайт нельзя будет корректно распечатать, если вы не озаботитесь подготовкой файла стилей для принтеров.
• На небольшом разрешении, например мобильного браузера, у вас могут появится несколько скроллбаров, что запутает пользователя.

Этих причин — хватает, чтобы отказаться от идеи использовании скроллбара, в месте для него не предназначенном. Сделать дизайн растягивающимся по высоте можно (и нужно) в 99.9% случаев.