Еще один способ использования свойства zoom

В 99.9% случаев CSS свойство zoom используется верстальщиками для активации hasLayout в IE. Я хочу рассказать о том 0.01% проценте использования этого свойства.
В те времена, когда трава была зеленее, миром правил IE, а дизайнеры учились рисовать сайты- приходилось часто сталкиваться с неоднозначными дизайнерскими решениями.
Одним из этих решений – кастомные скроллбары, например такие:
маленький скролл
<!--more-->

Особенность работы свойства zoom в IE заключается в том, что оно применяется не только для содержимого контейнера, но и для скроллбара контейнера.
Чтобы получить контейнер со скролом достаточно указать атрибут overflow: auto и ограничить высоту|ширину. В результате получим что-то вроде:
Шаг первый
Вторым шагом – попробуем применить свойство zoom:50%, содержимое блока уменшится в 2 раза:
Шаг второй
Как видно из картинки – мы уже получили узкий скролл, правда, уменьшили высоту блока и текст внутри.
Исправить это можно двумя шагами:
1 – увеличим высоту средствами css.
2 – увеличим содержимое блока в 2 раза (ровно на столько, на сколько мы уменьшили блок-родитель), для этого все содержимое блока обворачиваем в еще один элемент и задаем ему свойство zoom:200%:
Шаг третий - финальный
Комбинируя разные значения zoom можно получить скролбары не только маленького размера, но и большого:
Шаг третий - финальный
Разумеется, это работает только в IE.




Share this story