автор
Михаил
Ваваев




Технология
2ScrollBars

Две полосы прокрутки без JavaScript

В этой статье я расскажу, как реализовать идею двойной прокрутки в самом простом варианте используя только CSS. Это будет страничка с левой независимо прокручиваемой колонкой.
Разумеется, это будет кроссбраузерный вариант. Вообще, если ставить задачу создания странички для какого-то одного браузера, то реализовать можно практически все что угодно. Но поскольку моим обязательным условием была корректная работа странички во всех браузерах, то все мои реализации будут обладать рядом ограничений.


Все готовые HTML-шаблоны я буду размещать на сайте в виде файлов и давать на них ссылку. Вам следует его открыть, проверить его функциональность, а затем посмотреть его исходный код. Итак, первый наш шаблон можно посмотреть здесь. По ходу статьи я буду объяснять из чего состоит его исходный код.

В нашем первом шаблоне не будет шапки. Я имею ввиду ту шапку, которая бы перекрывала левую и/или правую колонки. Это связано с поведением свойства position: fixed, которое я описал в отдельной статье.

Первое, о чем мы позаботимся, это полоса прокрутки левой колонки. Это делает свойство overflow-y: scroll; Однако она должна располагаться слева. Это достигается с помощью свойства direction, которое определяет направление текста: либо справа налево (rtl), либо слева направо (ltr). Если текст идет слева направо (как в большинстве европейских языков), то полоса прокрутки будет справа. Нам же нужна левая полоса прокрутки, значит у нас будет direction: rtl; (К сожалению, с кроссбраузерностью есть маленькая, но несовместимость: очень старые версии браузера FireFox отображают полосу прокрутки всегда справа, независимо от свойства direction. Я не нашел решения этой проблемы. Если у вас есть предложения, изложите их в комментариях). Однако содержимое этой колонки у нас должно быть слева направо. Поэтому вкладываем в <div id="left"> еще один <div class="ltr">, для которого direction: ltr; Какие еще свойства должны быть у <div id="left">? Ну, во-первых, он должен быть на всю высоту экрана, т.е. height: 100%; Ширина его зависит от ваших нужд. Во-вторых, он не должен прокручиваться вместе со всем содержимым, т.е. не зависеть от правого скроллинга. Это достигается с помощью свойства position: fixed; Вот здесь мы подошли к первой существенной проблеме, суть которой я изложил в отдельной статье.

Для того, чтобы position: fixed; корректно работал в Internet Explorer 7+ необходим тег <!DOCTYPE html>. Если вы привыкли верстать страницы без этого тега, то вам необходимо прочитать отдельную статью о нем, в которой я особое внимание уделил решению нашей задачи.

Итак, у нас готовы таблицы стилей для двух тегов <div> образующих левую колонку

div#left {
	width: 30%;
	height: 100%;
	direction: rtl; /* В FF3 полоса прокрутки всегда справа */
	overflow-y: scroll;
	position: fixed; /* Не поддерживает IE6 */
}
div#left .ltr {
	height: 100%;
	direction: ltr;
}
В <div class="column"> находится содержимое левой колонки. В нашем шаблоне мы просто покрасим ее в желтый цвет и определим габариты.
.column {
	width: 100%;
	height: 50%;
	background-color: yellow;
}
Под содержимым левой колонки находится очень важный элемент <div id="leftfooter">. Без него никакой прокрутки не будет. В процессе прокрутки левой колонки именно он приходит на смену элементу <div class="column">, который уходит за верхнюю границу экрана. Поэтому высота <div id="leftfooter"> должна быть не менее 100%. Я же сделал ее чуть больше, чтобы иметь запас хода.
div#leftfooter {
	width: 30%;
	height: 106%;
}

Зачем нужна таблица

С правой колонкой <div id="right"> есть только один нюанс, на который надо обратить внимание. Зачем вообще в нашем шаблоне нужна таблица?
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
 <tr>
	<td width="18"></td>
	<td height="100%">
		<div id="right">
		правая правая правая правая правая правая правая правая правая
		</div>
	</td>
 </tr>
</table>
Ведь можно было бы обойтись и без нее, оставив только элемент <div id="right">. Если вы попробуете это сделать, то увидите, что правая колонка немного подлезает под левую. В чем дело? Казалось бы 30% + 70% = 100%. Но не все так просто. Дело в том, что 1% в левой колонке в абсолютных значениях не равен 1% в правой колонке. Относительные единицы левой колонки определяются без учета ее полосы прокрутки. Правая же колонка ничего не знает о левой полосе и вычитать ее из расчетов не будет. С помощью этой таблицы мы учитываем ширину левой полосы прокрутки, которая в большинстве браузеров по умолчанию равна 18px. Но тут мы опять сталкиваемся с очередной нерешенной проблемой. Во-первых, ширина полосы прокрутки не всегда может быть равна 18px. В настройках операционной системы ширину этих полос можно изменить (это актуально для слабовидящих людей). Во-вторых, полоса прокрутки может отсутствовать вовсе, как например на планшетах и смартфонах. Это существенное замечание, поскольку наша задумка ориентирована в первую очередь на них. Однако не во всех случаях эта проблема будет актуальна. Зная об этой проблеме, можно сверстать страницу так, чтобы избежать ее проявления. Именно так мы и будем поступать в будущем. Поэтому в следующих наших шаблонах этой таблицы не будет.

Однако у этого шаблона, существует более значительный недостаток, особенно актуальный на планшетах и смартфонах. В процессе масштабирования страницы на планшете, содержимое левой колонки остается привязанным к левому краю, тогда как отведенное ей место на странице уже давно ушло за экран. Это недостаток функции масштабирования браузера, который в данном случае не обрабатывает специальным образом поведение элемента position: fixed. Этот недостаток мы устраним с помощью JavaScript, описанный в следующей статье.

Итак, мы разобрали самый простейший шаблон, реализующий идею о двух полосах прокрутки. Этот шаблон работает во всех браузерах, но с некоторыми не значительными проблемами, которые я отметил в данной статье.

Однако это ведь не совсем то, о чем мы мечтали. Хотелось бы больше интерактивности. Например, чтобы содержимое правой колонки распространялось на всю ширину экрана, когда левая колонка уходит с экрана. Но это самая простая и очевидная функция, которую можно навесить на нашу левую колонку. А напридумывать можно еще много чего, чем мы с вами и займемся в следующих статьях. И не просто придумаем, а реализуем. Не забывая, конечно, о кроссбраузерности.

Все комментарии

нет комментариев

Ваш комментарий

Имя:
вставить:
Введите код с картинки