Рубрика «scrolling»

в 7:49, , рубрики: angular, cdk, infinite scrolling, javascript, scroll, scrolling, TypeScript, virtual scroll, Блог компании Tinkoff.ru, Разработка веб-сайтов

Привет!

В Angular CDK в седьмой версии появился виртуальный скролл.

Он отлично работает, когда размер каждого элемента одинаков, — причем прямо «из коробки». Мы просто задаем размер в пикселях и указываем, к какому элементу нужно прокрутить контейнер, сделать ли это плавно, а также можем подписаться на индекс текущего элемента. Однако что делать, если размер элементов меняется? Для этого в CDK предусмотрен интерфейс VirtualScrollStrategy, реализовав который мы научим скролл работать с нашим списком.

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

image

Читать полностью »

в 8:53, , рубрики: javascript, jquery, scrolling

Hello, jQuery, again! Посвящено тем сенсорным сингл тач экранам, которые еще не канули в лету и поддерживают события mouseDown и иже с ними. Именно таким оказался информационный терминал, на котором нужно было демонстрировать контент сайта.

Задача данного плагина — скроллинг контента посредством касания одним пальцем на сингл тач сенсорном экране.

Используемые события — mouseDown/Move/Out. По умолчанию эта цепочка событий выделяет содержимое в пределах касания.

Реализация — до боли знакомое overflow:hidden, обертывание содержимого элемента и перемещение контента внутри.

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

Надеюсь, для кого-нибудь эта статья окажется полезной и найдет своё применение.
Вэлком в комментарии, жду ваши мысли, ваш конструктив и негатив, всё, что направлено на улучшение данного кода!

Испытательный стенд на jsFiddle (48 строк некомментированного кода).
Читать полностью »

в 20:37, , рубрики: javascript, open source, scrolling, UI, usability, UX, Веб-разработка, интерфейсы, прокрутка, метки:

Месяц назад кто-то нашёл у меня на гитхабе незаконченный проект и выложил ссылку на него на Designer News. Внезапно я увидел, что на сайте проекта постоянно сидит по 50 человек, и мне даже пришлось срочно сбежать с работы чтоб экстренно выпилить хотя бы самые адовые баги. Этим проектом был интенс, UX-компонент заменяющий полосу прокрутки (скроллбар) на специальный индикатор, который подсвечивает прокручиваемую область текстурой. Выглядит это примерно так:

Интенс, индикатор прокрутки (или жизнь после скроллбара) - 1
на сайте проекта можно поскроллить самостоятельно

Сообщества UX-экспертов и программистов отреагировали очень возбуждённо:

Не могу понять, почему мне это не нравится… — GrumpyUX Man @ layervault

Святые какашки, эта штука бесит — Thecoss @ reddit

Да я себе скорее установлю ПЕРДЯЩИЙ СКРОЛЛ http://theonion.github.io/fartscroll.js/ в качестве дефолтного, чем КОГДА-ЛИБО заменю мою полосу прокрутки на это. — Kyle Donmoyer @ layervault

Спасибо, не надо. Никогда не мог понять это желание поменять стандартные элементы интерфейса. Полоса прокрутки — это одна из тех вещей, которая просто работает. Она не мешается и легко даёт понять, насколько много контента. — madk @ reddit

Шта? — magenta_placenta @ reddit

…
Я не очень понял, что за проблему оно решает — jineshshah36 @ reddit

(кто-то даже создал сабреддит Real Bad UX чтоб разместить там ссылку на этот проект)

Вместе с UX-экспертами, возбудился и я. Бесполезные проекты обычно никому не интересны, у меня есть пара таких. Но сейчас было очень непохоже — этот получился очень спорным, и такой движухи я ещё не видел. В течение следующих недель я попытался учесть основные комментарии и либо исправить что-то в самой библиотеке, либо добавить пояснения на сайте проекта. И одновременно выкладывал его на остальных ресурсах — градус фидбэка вроде бы стал смягчаться.

Здесь я хочу рассказать, какие области применения у интенса, и попробую объяснить, как я себе представляю «жизнь после скроллбара». А также предлагаю читателям покритиковать этот проект, обсудить скроллинг вообще, UX вцелом, и целесообразность замены традиционных элементов в частности.
Читать полностью »

в 13:12, , рубрики: jquery, jquery plugin, scrolling, навигация, скроллинг

Привет!
Предыдущий мой пост был встречен мягко говоря прохладно и, должен признать, для этого имелось достаточно оснований. Во-первых, это конечно отсутствие кода и каких-либо объяснений, из-за чего пост был воспринят как рекламный. Кроме того, в комментариях прозвучало такое мнение, что мгновенная смена кадров (блоков) выглядит убого по сравнению с нативной прокруткой. И с этим я не могу не согласиться. В самом деле, необходима какая-то анимация при переходе от одной позиции к другой. Плюс к тому, не мешало бы вернуть ставший уже привычным вертикальный скроллбар, вернее, предоставить его полноценную замену. Эти недостатки были устранены в новой версии плагина (во всяком случае я на это надеюсь). Теперь в нем есть поддержка анимации (эффектов перехода), а также кастомный скроллбар в виде расширения. А что касается первого недостатка, то его я постараюсь восполнить в этой статье.Читать полностью »

в 9:18, , рубрики: jquery, jquery plugin, scrolling, навигация, скроллинг, метки: , , , ,

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

в 12:37, , рубрики: html, javascript, jquery, jquery plugins, scroll, scrollbar, scrolling, метки: , , , , ,

Всем привет!
scroll macbook
В сети огромное количество плагинов для стилизации бегунка (скролла) прокрутки контента.
Все они имеют минусы, порой весьма серьёзные минусы. Поэтому использование кастомных скроллов в больших и сложных проектов сводиться на нет.

За свое ничтожное время работы front-end разработчиком я перепробовал огромное количество плагинов и потратил кучу времени и нервов поиске/написании костылей для них.
Решение было одно, написать свой настоящий плагин.

И, кажется, у меня получилось!
Читать полностью »

Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js