Теория скроллинга

Вот, самый просто пример нашей задачи: jScrollHorizontalPane

Только содержимым будет являться не просто текст, а список страниц нашего блога. В идеале, должно получиться что-то, похожее на:
Скроллинг внутри блока: Теория связанная со скроллингом Страницы

Теперь разберемся с поставленными задачами.

  1. Верстка модели для наполнения javascript'ом
  2. Javascript: скроллинг при помощи ползунка
  3. Javascript: скроллинг при помощи полосы прокрутки
  4. Javascript: Научиться останавливаться ползунок, чтобы не выходил за края

Весь этот план будет рассмотрен нами в течении нескольких статей, включая эту.

1. Верстка модели для наполнения javascript'ом

Чтобы приступать к созданию самого скроллинга, нужно сделать саму модель. Другими словами сверстать блок со страницами и все, остальное сделает за нас 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. Прошу прощение, за столь большой пропуск записей. С уважением, Vasilenko Ivan!

Комментарии — 10 комментариев

  1. #9768 Ярослав в 16:10, 17 июня 2010: (подписался)

    Ответить | Цитировать

    А это точно скроллинг называется?

    Я везде встречал, что это: постраничная навигация, pagination или еще как-нибудь. А скроллинг это полоса прокрутки (горизонтальная или вертикальная).

  2. Будет постраничная навигация. Но если страниц много, то они все будут в одну строку и прокручиваться горизонтально. Вот для чего эта идея.

  3. Можно убрать тег nobr, и добавить #pages{width:100%;white-space:nowrap;}

  4. #9775 Ярослав в 14:21, 18 июня 2010: (подписался)

    Ответить | Цитировать

    Тег nobr не просто можно убрать, его нужно убрать =)

    Я как-то работал с сайтами, у которых количество таких страниц переваливало за сотню. Обычно в этих случаях делали так:

    1 ... 67 68 69 ... 133

    Хотя, обычно пользователям не очень нужна какая-то конкретная страница (они просто не знают ее номер).

  5. Все заключается в двух причинах, чтобы пользоваться этим методом:

    1. Пользователю будет просто удобнее осознавать, что он видит все страницы. Плюс, наугад может открыть одну из любых ).

    2. SEO.

  6. #9780 Ярослав в 19:27, 18 июня 2010: (подписался)

    Ответить | Цитировать

    1. Ну, все страницы допустим полезно видеть, но в каких случаях пользователь захочет выступать в роли генератора случайных чисел? (наугад открывать). Обычно ведь ищут что-то конкретное.

    2. Для SEO смысл... вес по таким ссылкам если и будет перетекать, то очень небольшой. Плюс, это ведь ссылки с чисел, а не слов какой-то тематической категории. На мой взгляд эффективнее построить страницу «карта сайта».

    Впрочем, это все только субъективные мысли.

  7. Если мне нравится блог, я бы походил по его страницам. Не обязательно подряд. Еще, иногда, нужна какая-то конкретная страница.

  8. #10085 DuCoz в 9:53, 18 августа 2010:

    Ответить | Цитировать

    Будет постраничная навигация. Но если страниц много, то они все будут в одну строку и прокручиваться горизонтально. Вот для чего эта идея.

  9. Именно ; ).

  10. [...] в любых ситуациях. Следовательно, он остался тем же: теория скроллинга. В дальнейшем он будет изменяться [...]

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting