Вот, самый просто пример нашей задачи:
Только содержимым будет являться не просто текст, а список страниц нашего блога. В идеале, должно получиться что-то, похожее на:
Теперь разберемся с поставленными задачами.
- Верстка модели для наполнения javascript'ом
- Javascript: скроллинг при помощи ползунка
- Javascript: скроллинг при помощи полосы прокрутки
- Javascript: Научиться останавливаться ползунок, чтобы не выходил за края
Весь этот план будет рассмотрен нами в течении нескольких статей, включая эту.
1. Верстка модели для наполнения javascript'ом
Чтобы приступать к созданию самого скроллинга, нужно сделать саму модель. Другими словами сверстать блок со страницами и все, остальное сделает за нас javascript.
Все, что выходит за жирную синюю рамку, обрубаем при помощи overflow:auto;.
<div id="navigation">
<div id="pages">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl. Integer quis tellus nec turpis placerat scelerisque. In semper lacus eu nisi.
</div>
</div>
Для #pages устанавливаем параметр nowrap у свойства white-space, чтобы текст внутри не переносился на новую строчку.
#navigation{width:300px;overflow:auto;}
#pages{width:100%;white-space:nowrap;}
В следующей статье рассмотрим остальные пункты. Сразу скажу, скроллинг мной не был осуществлен, поэтому надеюсь на ваши комментарии.
P.S. Прошу прощение, за столь большой пропуск записей.
А это точно скроллинг называется?
Я везде встречал, что это: постраничная навигация, pagination или еще как-нибудь. А скроллинг это полоса прокрутки (горизонтальная или вертикальная).
Будет постраничная навигация. Но если страниц много, то они все будут в одну строку и прокручиваться горизонтально. Вот для чего эта идея.
Можно убрать тег nobr, и добавить #pages{width:100%;white-space:nowrap;}
Тег nobr не просто можно убрать, его нужно убрать =)
Я как-то работал с сайтами, у которых количество таких страниц переваливало за сотню. Обычно в этих случаях делали так:
1 ... 67 68 69 ... 133
Хотя, обычно пользователям не очень нужна какая-то конкретная страница (они просто не знают ее номер).
Все заключается в двух причинах, чтобы пользоваться этим методом:
1. Пользователю будет просто удобнее осознавать, что он видит все страницы. Плюс, наугад может открыть одну из любых ).
2. SEO.
1. Ну, все страницы допустим полезно видеть, но в каких случаях пользователь захочет выступать в роли генератора случайных чисел? (наугад открывать). Обычно ведь ищут что-то конкретное.
2. Для SEO смысл... вес по таким ссылкам если и будет перетекать, то очень небольшой. Плюс, это ведь ссылки с чисел, а не слов какой-то тематической категории. На мой взгляд эффективнее построить страницу «карта сайта».
Впрочем, это все только субъективные мысли.
Если мне нравится блог, я бы походил по его страницам. Не обязательно подряд. Еще, иногда, нужна какая-то конкретная страница.
Будет постраничная навигация. Но если страниц много, то они все будут в одну строку и прокручиваться горизонтально. Вот для чего эта идея.
Именно ; ).