Создание сайтов > Программирование > Теория скроллинга

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

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

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

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

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

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

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

Чтобы приступать к созданию самого скроллинга, нужно сделать саму модель. Другими словами сверстать блок со страницами и все, остальное сделает за нас javascript.

Верстка модели для наполнения javascript'ом
Все, что выходит за жирную синюю рамку, обрубаем при помощи overflow:auto;.

Для #pages устанавливаем параметр nowrap у свойства white-space, чтобы текст внутри не переносился на новую строчку.

#navigation{width:300px;overflow:auto;}
#pages{width:100%;white-space:nowrap;}

В следующей статье рассмотрим остальные пункты. Сразу скажу, скроллинг мной не был осуществлен, поэтому надеюсь на ваши комментарии.

P.S. Прошу прощение, за столь большой пропуск записей.

17 июня 2010 в 14:1510 комментариев Программирование,

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

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

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

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

  2. #9770 Евгений Жлобо в 17:55, 17 июня 2010:

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

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

  3. #9771 Евгений Жлобо в 17:57, 17 июня 2010:

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

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

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

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

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

    Я как-то работал с сайтами, у которых количество таких страниц переваливало за сотню. Обычно в этих случаях делали так:
    1 … 67 68 69 … 133
    Хотя, обычно пользователям не очень нужна какая-то конкретная страница (они просто не знают ее номер).

  5. #9776 Евгений Жлобо в 14:45, 18 июня 2010:

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

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

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

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

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

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

  7. #9782 Евгений Жлобо в 10:47, 19 июня 2010:

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

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

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

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

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

  9. #10096 Евгений Жлобо в 16:22, 18 августа 2010:

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

    Именно ; ).

  10. #10678 Плагин скроллинга текста внутри блока | Блог Интернет Технологий в 15:16, 3 ноября 2010:

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

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

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

имя:

e-mail:

сайт:

текст:

Subscribe without commenting