СоХабр закрыт.

С 13.05.2019 изменения постов больше не отслеживаются, и новые посты не сохраняются.

H jquery.scrollless — блочный скроллинг взамен нативного плюс многое другое в черновиках

jQuery

Плагин jquery.scrollless позволяет получить полный контроль над всем, что связано с прокруткой и перемещением по документу. Это достигается путем замены нативного скроллинга его «блочной» альтернативой. Суть «блочного» («поблочного») скроллинга в том, что основное содержимое документа (контейнера) разбивается на «блоки», каждый из которых либо отображается в окне полностью, либо не показывается совсем.

С точки зрения пользователя сам по себе jquery.scrollless делает ровно то, о чем говорит само его название, при этом не давая никакой возможности перемещения по документу. Весь функционал связанный с пользовательским интерфейсом (в т.ч. «блочная» прокрутка) реализуется через систему расширений. Плагин jquery.scrollless поставляется с несколькими «стандартными» расширениями, которые можно использовать (как по отдельности, так и все вместе) для организации UI веб-документа:

  • pagenav — постраничная навигация. Это не совсем то, что обычно используется на вебсайтах. Здесь «страница» — это логическая единица информации, никак не связанная с ее отображением в браузере. Разбить содержимое документа на страницы можно вручную (путем вставки «разрывов страниц» в верстке), либо автоматически (по количеству символов на страницу), также возможна и комбинация этих способов. Для перемещения внутри страницы используется «ползунок».
  • affixnav — аналог Bootstrap'овского плагина Affix, но с автоматической генерацией блока содержания.
  • keyctrl — эмуляция нативной прокрутки в десктопных браузерах с помощью клавиатуры (+ колесико мыши).
  • tapctrl — эмуляция управления в электронных книгах типа Nook Simple Touch. Тап (клик) справа — на один «экран» вперед, тап слева — на «экран» назад.




Демо
Репозиторий на GitHub.
jquery, jquery plugin, прокрутка, scrolling, скроллинг, навигация
–3
  xmeoff

комментарии (17)

+6
+8 –2
lair ,  

А зачем? Зачем отбирать у пользователя привычный ему способ навигации?

+1
+2 –1
Blumfontein ,  

Если бы было без jquery, было бы великолепно.

+1
DenimTornado ,   * (был изменён)

Что-то пошлоа не так… take.ms/0Cp3k

+2
oWeRQ ,   * (был изменён)

Идея хорошая, но зачем же было убивать плавный скролинг, а если абзац занимает пол экрана? Даже сейчас, при сдвиге ~3 строки постоянно приходится искать последний прочитанный абзац.

+1
Suvitruf ,  

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

0
format1981 ,  

И еще внизу страницы появляются пустоты если следующий блок не помещается полностью — http://joxi.ru/n1qIUxjKTJBVHzxlfEA

0
coll3ctor ,  

Спасибо за рекламу, нужно попробовать.

0
Vanger13 ,  

Слишком уж непривычно для пользователя. Плюс, не работает скрол по нажатию средней кнопки мыши (в винде) — такое поведение, наверно, можно только эмулировать в данном подходе, а не «чинить».

0
RMV1983 ,   * (был изменён)

Огнелис. Не работают стрелки и пробел в демо.

0
akopichin ,   * (был изменён)

На эпловской сенсорной мыше — предыдущая страница — свайп влево — не работает с этим скроллингом, приходится тянуться к кнопке браузера. Не айс.

+4
not_ice ,  

Да на маке это вообще смешно работает — крутнул раз пальцами и оказался сразу на 8 странице )))

0
akopichin ,  

Да, скроллит слишком быстро. Но я думаю это настраиваемо, либо допилят. :)

0
not_ice ,  

Увы, это ненастраиваемо — это by design. То же, что со всеми онлайн-картами — чуть дрогнуть скролл, и масштаб меняется с минимума на максимум, это уже обсуждалось на Хабре. Проблема в том, что на маке частота срабатывания скролла в несколько раз выше, чем под виндой, и это никак нельзя детектировать.

–3
xmeoff ,  

Всем кто писал про проблемы на Маке. Плагин не тестировался в Apple-устр-вах и приложениях (см. Readme в репозитории). Следов-но все они не поддерживаются (на данный момент).

0
EvilFox ,   * (был изменён)

1. Не плавно. Я привык к плавности в ИЕ11. А в лисе и хроме есть костыль для настройки плавности и многим пользователям не понравится что вдруг прокручивается не так как ожидается (у меня сразу вызывало раздражение);
2. Нет полосы прокрутки, а это бывает полезно;
3. Не работает прокрутка по средней кнопке мыши, тоже бывает полезно.
4. На первой странице наверху закрашивает индикатор 3 страницы, хотя не должно.
5. Было бы удобнее правый блок прокручивать отдельно колесом мышки.
6. Не работает проблел, End, Home.
Проверял пока только в ие11.
Если бы не это было бы привлекательно, а так отталкивает.

0
xmeoff ,  

Забавно. Большинство пунктов касается эмуляции прокрутки, для избавления от которой и был написан плагин. Сейчас я уже жалею, что включил эту эмуляцию в демо: это провоцирует сравнение с нативной прокруткой и смазывает общее впечатление.
Насчет плавности прокрутки. Имхо это дело вкуса. Меня, например, это наоборот раздражает.

0
E_STRICT ,   * (был изменён)

Как-то можно привязать якоря для страниц и разделов?