Полезное

Смотреть что такое «Скроллинг» в других словарях:

скроллинг — прокрутка Ускоренное перемещение в вертикальном или горизонтальном направлении всего изображения или его части, отображаемой в выделенном окне на экране дисплея. Различают два вида прокрутки: непрерывная и построчная. [Л.М. Невдяев.… … Справочник технического переводчика

Shoot ’em up — Galaga, известный shoot em up 1981 года. Shoot em up (в переводе означает «перестреляй их всех») жанр компьютерных и видеоигр, в которых игрок, управляющий каким либо персонажем или техническим средством, сражается с большим количеством врагов… … Википедия

Shmup — Shoot em up жанр компьютерных и видеоигр, в которых игрок, управляющий каким либо персонажем или техническим средством, сражается с большим количеством врагов при помощи стрельбы. Процесс игры часто изображён в очень стилизованной манере. В… … Википедия

Wintermute Engine — Тип Игровой движок Разработчик Dead:Code Software Операционная система Windows Последняя версия … Википедия

Wme — Wintermute Engine логотип инструментария Тип Игровой движок Разработчик Dead:Code Software ОС … Википедия

Рельсовый шутер — Shoot em up жанр компьютерных и видеоигр, в которых игрок, управляющий каким либо персонажем или техническим средством, сражается с большим количеством врагов при помощи стрельбы. Процесс игры часто изображён в очень стилизованной манере. В… … Википедия

Shoot \’em up — Galaga, известный shoot em up 1981 года. Shoot em up жанр компьютерных и видеоигр, в которых игрок, управляющий каким либо персонажем или техническим средством, сражается с большим количеством врагов при помощи стрельбы. Процесс игры часто… … Википедия

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

Sega Master System — Sega Master System … Википедия

История Mozilla Firefox — Объединить Mozilla Firefox … Википедия

Источник

Скроллинг

Прокрутка, скролл, скроллинг (от англ. scroll, scrolling) – это форма передачи информации, при котором текст или изображение передвигается в вертикальном либо в горизонтальном направлении, чтобы увидеть дополнительную информацию в окне.

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

Тот факт, что скроллинг стал обычным делом и хорошо воспринимается пользователями, подтверждают данные исследований. Оказывается, что:

Исследуя юзабилити страниц, эксперты Software Usability Research Laboratory пришли к выводу, что длинные тексты со скроллом пользователи читают быстрее, чем те же тексты, но с разбивкой на страницы.

Это следует учитывать при разработке сайта. Важно разбить текст на «точки прокрутки», т.е. выделить в информации ключевые моменты. Если это не делать, то может возникнуть «усталость от скроллинга», что приведет либо к эффекту «зомби-скроллинга», при котором пользователь не воспринимает информацию либо к «отказу в гневе», когда пользователь уходит с сайта.

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

Правила юзабилити скроллина

Прежде всего, нужно так организовать контент, чтобы его было легко прокручивать. Вот несколько практических советов, как это сделать:

Это феномен возникает, когда пользователь думает, что внизу страницы уже нет контента. Это происходит по двум причинам:

Чтобы дать понять пользователям, что на странице внизу еще есть полезная информация учтите следующее:

Источник

Что значит «скролить» в интернет-сленге?

Есть рутинные действия, выполняя которые, никто не задумывается об их названии. Пример из классики — мольеровский герой, узнавший, что всю жизнь говорил прозой. Вряд ли вы испытаете подобную радость, узнав, что привычное движение при просмотре информации на компьютере в интернет-сленге означает «скролить», но все же…

Происхождение слова

Скролить от англ. «scroll» — свиток, спираль, крутить, прокручивать.

В английском языке в списке компьютерных терминов давно укрепилось выражение «scroll through the text» — прокручивать текст на экране.

Значение слова

Понятие «скролить» в русском языке полностью совпадает с иностранным оригиналом и означает «перелистывать, сдвигать текст на экране».

Иногда можно услышать «скролл» как существительное. Среди художников и архитекторов так иногда называют красивый завиток.

Примеры использования термина

На клавиатуре любого компьютера есть кнопка «scroll lock», запрет прокручивания текста на странице. Нажав на нее, скролить экран станет невозможно.

«Could you scroll down a few lines? » — Не могли бы вы прокрутить на несколько строк вниз?

Кроме того, скролом называют колесико компьютерной мышки. Скролить — также крутить его, вызывая ответное движение просматриваемой страницы.

Словарь интернет-сленга регулярно пополняется за счет заимствований, не добавляющих ничего нового к значению, зато звучащих интересней. Чтобы с легкостью пользоваться сленговым словарем, узнайте также, что такое топик, миракл, крафт.

Источник

Обзор технологий скроллинга

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

Существует множество технологий, связанных со скроллингом. Цель этой статьи заключается в том, чтобы дать обзор таких технологий и инструментов, которые помогут подобрать и создать то, что нужно в каждой конкретной ситуации. Я разделил бы технологии скроллинга на две широкие категории. В первую входят технологии для реализации специфических механизмов скроллинга, во вторую — технологии скроллинга общего назначения.

Технологии для реализации специфических механизмов скроллинга

В CSS существует несколько простых стандартных эффектов скроллинга, поддерживаемых современными браузерами. В некоторых случаях их применения может быть достаточно для того чтобы обеспечить особенные нужды некоего проекта.

▍CSS-свойство position: sticky

Синий элемент «упирается» в верхнюю часть контейнера и не прокручивается вместе с остальными элементами

Вот демонстрация такого скроллинга.

▍Эффект параллакса

Эффект параллакса — это, скорее, не особая технология, а специальный технический приём. Но, как бы там ни было, этот эффект может оказаться весьма кстати в тех случаях, когда нужно, чтобы при скроллинге разные части страницы двигались бы с разной скоростью. Данный приём хорошо описан в этом материале. Существует и немало примеров его реализации. Например — этот. Для меня главный минус этого приёма заключается в том, что сложно понять то, какие значения, дающие правильный эффект параллакса, нужно использовать для настройки перспективы и трансформаций.

Эффект параллакса: элементы движутся с разной скоростью.

Вот демонстрация эффекта параллакса.

▍Прокрутка с привязкой к определённым точкам

Использование скроллинга с точками привязки позволяет браузеру автоматически настраивать положение элементов, перемещая их в определённую позицию после того, как пользователь завершил обычную операцию скроллинга. Это может оказаться полезным в случаях, когда нужно, чтобы после завершения прокрутки некий элемент находился бы целиком в поле зрения пользователя. Однако соответствующий API пока ещё нестабилен, поэтому постарайтесь пользоваться самыми свежими его реализациями и с осторожностью относитесь к применению этого подхода к скроллингу в продакшне. Вот хорошая статья на эту тему.

Если пользователь, прокручивая содержимое, уводит элемент за верхнюю границу контейнера, браузер автоматически изменит положение элемента так, чтобы он был бы виден целиком

Вот демонстрация работы скроллинга с точками привязки.

▍Плавная прокрутка

Плавный скроллинг поддерживается средствами браузера при прокрутке страницы до определённого раздела с использованием метода window.scrollTo() в JavaScript, или даже с применением CSS-свойства scroll-behavior. В настоящее время для реализации плавного скроллинга со сглаживанием движений колеса мыши требуются специальные JavaScript-библиотеки. Но при применении таких библиотек нужно обеспечить их нормальное взаимодействие с другими технологиями скроллинга. Кроме того, использование плавного скроллинга — это далеко не всегда хорошая идея.

Технологии скроллинга общего назначения

▍Использование API Intersection Observer

API IntersectionObserver позволяет с успехом решать различные задачи, связанные со скроллингом, в том случае, если всё, что нужно для запуска анимации, — это знание о том, видим ли элемент в области просмотра, а так же о том, какая именно часть элемента видима. Это делает API IntersectionObserver отличным инструментом для запуска анимации, сопровождающей появление элемента на экране. Но, даже так, некоторые эффекты очень сложно (хотя и можно) реализовать с помощью этого API. Например — это запуск разных анимаций в зависимости от направления движения элемента. Этот API, кроме того, не особенно полезен в ситуации, если при скроллинге нужно запускать анимацию тогда, когда элемент находится где-то в середине области просмотра, то есть, не появляется в области просмотра и не исчезает из неё.

▍Использование события scroll

Инструменты для создания механизмов скроллинга общего назначения

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

▍ScrollMagic

Библиотека ScrollMagic даёт нам сравнительно простой API, позволяющий создавать различные эффекты при скроллинге. Эта библиотека может работать совместно с различными библиотеками для анимации, наподобие GSAP и Velocity.js. Правда, в последние несколько лет эта библиотека недостаточно хорошо поддерживается. Это привело к тому, что была создана библиотека ScrollScene.

▍ScrollScene

ScrollScene — это, в сущности, обёртка, которая направлена на то, чтобы повысить удобство работы с библиотекой ScrollMagic и (или) с API IntersectionObserver. Здесь используется собственная версия ScrollMagic, которая отличается лучшей поддержкой, чем обычный вариант библиотеки. Тут имеются и дополнительные возможности, наподобие проигрывания видео и поддержки контрольных точек, влияющих на анимацию. Кроме того, эта библиотека использует GSAP.

▍ScrollTrigger

Библиотека ScrollTrigger — это официальный GreenSock-плагин для GSAP. Эта библиотека отличается большим набором возможностей, её API кажется мне самым простым из API существующих библиотек для скроллинга. Используя эту библиотеку, вы полностью контролируете то, где именно начинается и заканчивается анимация скроллинга, вы можете анимировать при прокрутке всё что угодно (WebGL, canvas, SVG, DOM), можете закреплять элементы на время выполнения анимации. Этим возможности данной библиотеки не ограничиваются. Кроме того, эту библиотеку поддерживает GreenSock, получить помощь по её использованию можно на форумах GreenSock.

▍Библиотека, достойная упоминания: Locomotive Scroll

Сравнение технологий и инструментов

Вот сравнение технологий скроллинга.

Вот сравнение рассмотренных библиотек.

Итоги

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

Я обычно, для настройки скроллинга, рекомендую использовать библиотеку ScrollTrigger. Она позволяет достичь всего, на что способен чистый CSS, а так же — многого другого. Эта библиотека берёт на себя заботу о браузерной поддержке тех или иных технологий, облегчает выполнение вычислений, что позволяет тому, кто её использует, просто заниматься своими делами.

Какие технологии вы используете при настройке скроллинга в своих проектах?

Источник

Связанные словари

Скролить

Происхождение: Scroll прокрутка, крутить.

Прежде чем продолжить, мне хотелось бы посоветовать вам прочесть, ещё несколько интересных новостей на тему интернет жаргона. Например, как понять слово Эдвайс, что значит Гыг, что означает Бугага, что такое Камон и т. п.

Итак, продолжаем, что значит Скролить? Этот термин был заимствован из английского языка » Scroll«, и переводится, как » прокрутка«. Обычно, скрол происходит при просмотре интернет страниц, которые не влезают на экран монитора, и ещё много информации остаётся «за кадром».

Часто Вконтакте нам приходиться скролить стену в ВК, чтобы прочесть всю необходимую информацию. Вообще при чтении какой-либо информации скролл осуществляется колёсиком мышки.

Источник

Что такое «Скроллить»? Определение слова «Скроллить» и его смысл

Скроллить (ударение на «о») означает «прокручивать», но не фарш на мясорубке, а цветастый винегрет из постов в инстаграмме или тому подобном фейсбуке.

Английский глагол to scroll означает «прокручивать окно браузера» или другой программы, а происходит он от слова scroll (свиток), который древние чтецы интересных текстов тоже прокручивали, чтобы прочитать следующий абзац. Давайте проспрягаем глагол «скроллить» с примерами из современной жизни в увлекательном мире интернетов:

Я от скуки целый день скроллю ленту в инстаграме.

Ты прямо сейчас тоже скроллишь свой браузер, чтобы дочитать эту статью.

Маша, вместо того чтобы слушать лектора на паре, скроллит ленту в Одноклассниках.

Ребята, вы слишком быстро скролите, и я не успеваю читать!

На скамейке в парке сидят влюблённые парочки и скроллят каждый свой смартфон.

Источник

Что такое слово «Скролить»

Значение

Означает изменять положение экрана, проще говоря, прокручивать страницу, например в браузере при чтении чего-либо Скролл осуществляется колесиком мышки, изменением ползунка в правой части экрана и клавишей Scroll Lock ( Не на всех клавиатурах она есть ) Например: при чтении стены в ВК мы скроллим, прокручивая страницу вверх или вниз.

Происхождение:

Синонимы:

Рядом по алфавиту:

Верно ли значение у слова?
Зыз

Легко выйгранный матч.

Буквы а, о, у, ы, э делают предыдущий согласный твёрдым, буквы я, ё, ю, и, е — мягким.

Верно ли значение у слова?
Массаракш

Канал Грибоедова в Питере — собственно канал, одноименная станция метро и прилежащий район.

© 2019–2022. Все опубликованные материалы носят информационный характер и предназначены для ознакомительных целей. Их нельзя использовать в качестве решения заданий.

При использовании данного сайта, вы подтверждаете свое согласие на использование файлов cookie в соответствии с настоящим уведомлением в отношении данного типа файлов.

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

Источник

Бесконечный скроллинг или пагинация — какой прием использовать для сайта

Разработчик Ник Бабич проанализировал два подхода к представлению данных на веб-страницах и сделал вывод, в каких случаях уместнее использовать нумерацию, а в каких — бесконечную прокрутку.

Редакция рубрики «Интерфейсы» публикует перевод материала.

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

Стоит ли использовать бесконечную загрузку для данных или все-таки остановиться на нумерованных страницах? Такой вопрос мучает многих дизайнеров. И действительно, выбор не из простых, ведь у каждого из методов свои сильные и слабые стороны, причем не всегда очевидные с первого взгляда. Рассмотрим оба метода, чтобы вам было проще делать выбор.

Бесконечный скроллинг

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

Преимущество 1: Вовлеченность пользователя и естественное желание глубже изучать материал

Если скроллинг используется как основной метод навигации по данным, это может положительно сказаться на времени нахождения пользователя на сайте или использования приложения. Увеличивается вовлеченность целевой аудитории. С ростом популярности социальных медиа пользователи часто имеют дело с массивными потоками данных, и бесконечный скроллинг предлагает довольно эффективный способ потребления этого океана информации. Независимо от используемого устройства люди склонны глубже изучать материал, когда это не требует от них дополнительных усилий.

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

Pinterest с его бескрайним океаном «пинов»

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

Новостная лента Facebook практически вынуждает пользователей скроллить еще и еще в поисках контента

Преимущество 2: Скроллить легче, чем кликать

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

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

Преимущество 3: Скроллинг хорошо подходит для мобильных устройств

Чем меньше экран, тем длиннее скролл. Популяризация устройств с сенсорным экраном также выступает в пользу скроллинга. Для современных пользователей скроллинг стал практически интуитивным действием. В случае со скроллингом данные и действие по их получению (скролл) напрямую связаны друг с другом, поэтому пользователи получают по-настоящему отзывчивое взаимодействие от интерфейса вне зависимости от используемого устройства.

Источник изображения — Dribbble

Недостаток 1: Производительность страницы и ресурсы устройства

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

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

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

Недостаток 2: Поиск и местоположение объекта в потоке данных

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

В интерфейсе сервиса Pinterest есть опция закладок

Невозможность определить свое положение при скроллинге вызывает у пользователей неудобства и в результате портит весь опыт взаимодействия с продуктом.

В 2012 году в Etsy вложила много сил в реализацию скролл-интерфейса и, к своему удивлению, обнаружили, что новый интерфейс не работал так же хорошо, как старый вариант с пагинацией. Хотя количество продаж осталось почти без изменений, вовлеченность пользователя была меньше: люди не использовали поиск так же активно, как раньше.

Интерфейс поиска с бесконечным скроллингом на Etsy. Текущая версия построена на пагинации

Дмитрий Фадеев отмечает: «Люди захотят вернуться к результатам поиска, чтобы вновь увидеть вещи, которые они выбрали раньше, и сравнить их с теми, которые нашли после. Бесконечный скроллинг не только нарушает эту динамику — он усложняет передвижение вниз и вверх по списку, особенно когда пользователь возвращается к странице в другое время и начинает поиск с самого верха. Ему вновь приходится прокручивать вниз и ждать загрузки контента. Поэтому интерфейс с бесконечным скроллингом на самом деле медленнее, чем с пагинацией».

Недостаток 3: Нерелевантный скроллбар

Пользователей может раздражать то, что скроллбар не отражает реального объема доступных данных. Вы думаете, что уже близки к концу, что само по себе заставляет прокрутить страницу еще немного вниз, — и когда вы уже практически «достигли дна», внезапно видите, что результаты просто удвоились в количестве. С точки зрения доступности и понятности интерфейса это, мягко говоря, не очень хорошо.

Полоса прокрутки должна отражать истинную длину страницы

Недостаток 4: Отсутствие футера

«Подвалы» существуют не просто так — они содержат контент, который может быть полезен для пользователей. Если пользователи не могут что-то отыскать или им нужна дополнительная информация, чаще всего они пытаются найти это в футере. Но лента скроллится бесконечно: когда пользователь добирается до футера, загружается еще одна порция данных, и вытесненный ими футер уходит из поля зрения.

Возьмем, к примеру, сервис Bing Images. Футер сервиса содержит ссылки Learn More и Help, но пользователям вряд ли удастся перейти по ним, так как ссылки будут постоянно «убегать» от них из-за загружаемого контента.

На сайтах с бесконечным скроллом «подвал» должен быть легкодоступным для пользователей. Этого можно добиться, сделав его «липким» либо вообще переместив в шапку или боковую панель, как это сделал Facebook.

Facebook перенес все ссылки из подвала (например, Legal, Careers) в панель справа от новостной ленты

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

Instagram использует кнопку Load More, чтобы подвал был доступен пользователям

Пагинация

Пагинация — это механизм, который делит контент на отдельные страницы. Если, проскроллив вниз страницы, вы видите ряд цифр — это и есть пагинация сайта или приложения.

Преимущество 1: Хорошая конверсия

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

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

Данные результатов поиска Google

Преимущество 2: Ощущение контроля

Бесконечный скроллинг похож на бесконечную игру: неважно, как далеко вы в итоге пройдете, вас всегда будет преследовать ощущение, что вы никогда не доберетесь до конца. Когда пользователи заранее знают количество доступных результатов, они могут принять более осмысленное решение. Дэвид Кирас в своем исследовании «Психология взаимодействия человек — компьютер» отмечает: «Достижение конечной точки дает ощущение контроля».

Исследование также поясняет: когда у пользователей есть ограниченные, но при этом релевантные результаты, им проще понять, ищут ли они то, что нужно. Кроме того, когда пользователи видят общее количество результатов (разумеется, если оно не бесконечно), им проще оценить, сколько времени займут поиски нужного материала.

Преимущество 3: Положение элемента

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

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

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

Онлайн-магазин MR Porter использует пагинацию для представления товаров

Недостаток: Дополнительные действия

Чтобы перейти на новую страницу, используя пагинацию, пользователь должен найти целевую ссылку (например, «Next»), навести на нее мышкой, кликнуть и ждать, пока страница загрузится.

Для получения контента нужно кликнуть

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

В каких случаях что использовать

Есть всего несколько случаев, когда бесконечный скроллинг эффективен. Он лучше всего подходит для сайтов и приложений с контентом, который генерируют пользователи (Twitter, Facebook) или с визуальным контентом (Pinterest, Instagram). Пагинация же надежна и хорошо подходит для сайтов и приложений, которые удовлетворяют целенаправленным действиям пользователей.

Сервисы компании Google — наглядное подтверждение этого правила. Google Images использует бесконечный скролл, потому что восприятие изображений происходит гораздо быстрее, чем чтение текстовых результатов поиска. Это и есть основная причина, почему результаты Google Search до сих пор отображаются в более традиционной манере.

Заключение

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

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

Источник

Энциклопедия маркетинга

Каталог консалтинговых компаний

Библиотека маркетолога

Как заставить пользователей просматривать страницу полностью

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

Почему стоит использовать длинные страницы?

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

Когда специалист MOZ Ранд Фишкин (Rand Fishkin) сказал, что ему необходимо около девяти минут для продажи PRO-версии одной из услуг MOZ при живом общении, стало понятно, что посадочная страница должна быть длинной. Итоговая страница, которую мы разработали для MOZ, была в шесть раз больше начальной и превзошла ее в размерах на 52%.

Некоторых маркетологов смущают длинные страницы из-за того, что они ассоциируются с агрессивными техниками продаж. Всякий раз, когда кто-то говорит вам, что он никогда ничего не покупает на длинных страницах, напомните ему про размер страниц Амазона.

Где граница первого экрана?

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

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

Растущее количество пользователей мобильными браузерами актуализирует необходимость структурирования верхней части экрана.

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

Существует два способа определения того, упускают ли ваши пользователи из вида важный контент из-за того, что не прокручивают страницу:

Методы, побуждающие пользователей скролить

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

1. Горизонтальные объекты в верхней части экрана: как их избежать и на что заменить

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

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

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

2. Используйте фон для боковых и верхних сторон страницы

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

3. Добавьте явный призыв к прокрутке

Будьте прямыми и откровенными с вашими пользователями, попросив их сделать то, чего вы от них ожидаете. Не бойтесь прямо попросить пользователя прокрутить страницу; вполне нормально будет сказать «Прокрутите страницу, чтобы…»

Пользователи скорее последуют призыву, если получат разъяснения о необходимости выполнить то или иное действие. Например, фраза «Читайте далее и узнайте как получить скидку 10%» станет мотивированным призывом к действию.

4. Добавьте изображение, призывающее к прокрутке

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

В качестве альтернативы, вы можете разместить такое изображение в виде плавающего объекта, который автоматически будет прикрепляться к нижней части окна браузера пользователя. Это изображение будет автоматически «подстраиваться» под размер экрана пользователя и появляться в нужном месте. Преимущество данного метода еще и в том, что такие объекты не нарушают общую структуру сайта и вы сможете добавить их при помощи простого куска кода.

5. Добавьте возможность клика для прокрутки

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

Также можно создать ссылки, кликая по которым пользователь попадет в нужное ему место в пределах одной страницы. Это делается при помощи элементарного HTML-кода.

6. Не принуждайте пользователей к горизонтальной прокрутке

Горизонтальные прокрутки не являются естественными для большинства пользователей. Обычно, такая прокрутка становится проблемой, когда окно браузера пользователя оказалось более узким, нежели предполагаемый размер, для которого был разработан сайт. Одним из путей борьбы с такими проблемами является адаптация сайта под экраны меньшего разрешения. Еще можно разработать отдельные таблицы стилей под разные разрешения экрана или использовать «резиновую» верстку, которая будет автоматически адаптироваться под разные размеры экранов.

Выводы

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

Источник

Горизонтальная прокрутка CSS: определение и как убрать на всех разрешения

В общем, сегодня мы обсудим:

что такое горизонтальный скролл ;

когда его можно использовать ;

когда его лучше устранять ;

как убрать горизонтальный скролл возможностями CSS.

Горизонтальный скролл CSS

Горизонтальный скролл CSS: особенности

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

Особенности горизонтального скролла:

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

Поисковые системы к горизонтальному скроллу относятся с презрением. Пользователям десктопных устройств не нравится скроллить «в сторону». Это не удобно. Поэтому поисковые системы пошли им навстречу и не рекомендуют использовать такой вид скролла на веб-ресурсе.

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

Организовать горизонтальный скролл можно разными способами, в том числе и при помощи CSS. Важно подходить к его организации со всей ответственностью, чтобы скролл приносил пользу, а не дополнительное неудобство для пользователей. Но бывают случаи, когда горизонтальный скролл появ ляется нежданно и от него нужно избав лять ся. В этом случае на помощь придет определенное CSS-свойство.

Как убрать горизонтальный скролл с помощью CSS

Как убрать горизонтальный скролл в html, используя CSS-свойство «overflow»

Свойство «overflow» обрезает весь контент, выходящий за рамки блока, для которого оно назначено. То есть, если у вас образовалась горизонтальная прокрутка всей веб-страницы и вы не можете найти элемент, который ее провоцирует, тогда можно применить свойство «overflow» к элементу «html» и/или «body».

Код будет таким:

Нужно отметить, что свойство «overflow» — это общее свойство. Оно включает в себя:

overflow-х — свойство, отвечающее за горизонтальную прокрутку;

overflow-у — свойство, отвечающее за вертикальную прокрутку.

Заключение

Сегодня вы узнали, что такое горизонтальная прокрутка и как ее можно специально использовать. Если же она возникла случайно, тогда есть проверенный способ, как убрать горизонтальный скролл возможностями CSS — использовать свойство «overflow».

Мы будем очень благодарны

если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.

Источник

Что означает слово скролить? Что значит скролить?

Здравствуйте! Когда Вы находитесь на каком то сайте и пролистываете сайт колесиком на мышке, этот колесик называется scroll. Отсюда выражение скролить-проматывать, пролистывать

Слово «животрепещущий» впервые появилось в словаре В.И. Даля. Там оно имело толкование «полный, обильный жизнью, живой».

Слово «Животрепещущий» впервые возникло в профессиональном языке торговцев рыбой. Оно имело вполне конкретное значение: «бьющийся и подпрыгивающий, трепыхающийся». Так говорили о рыбе, которую недавно извлекли из воды.

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

С точки зрения русского языка, отонок, это неодушевлённое существительное мужского рода в единственном числе.

Источник

Погружаемся в работу со скроллом в Jetpack Compose

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

Какое-то время назад я решил, что надо попробовать Compose в деле и начал делать pet project приложение Хотелки, суть которого в записи своих желаний и возможности делиться списком желаний с помощью любого мессенджера.

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

Работа с позицией скролла и скролл к элементу в LazyColumn

На одном из экранов есть айтемы, которые скроллятся. Каждый айтем – это ярлык, кликнув на него айтем становится инпутом, где можно изменить название ярлыка. При этом открывается клавиатура и, если айтем был в нижней части, то клавиатура его перекроет. Поэтому нам нужно скроллить к айтему, который сейчас в фокусе.

Чтобы его использовать, нужно перед описанием LazyColumn создать LazyListState

а потом передать его в LazyColumn

Для того, чтобы узнать позицию скролла нам предлагается два поля в LazyListState :

firstVisibleItemIndex – индекс самого верхнего видимого элемента на экране, firstVisibleItemScrollOffset – смещение в пикселях от верхнего края нашего контейнера LazyColumn до верхней грани элемента. Это смещение будем нулевым в начальной позиции скролла и по мере того, как первый элемент будет перемещаться вверх, значение firstVisibleItemScrollOffset будет расти пока не достигнет размера элемента и дальше снова будет нулевым, так как первым видимым элементом на экране станет уже следующий.

Этот список мы и будем использовать, чтобы определить находится ли сейчас айтем с фокусом на экране – и нам не нужно ничего делать или он не виден пользователю и нам нужно проскроллить к нему.

Делаем это с помощью вот такой функции:

Зная индекс айтема, для которого мы запросили фокус, мы ищем его среди видимых пользователю. Соответственно если его нет в списке, значит он не виден, а если есть – нам надо ещё определить, полностью ли он виден, так как LazyListState помещает в visibleItemsInfo элемент, даже если видна только его часть.

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

Для этого в метод scrollToItem() можно передать scrollOffset – это смещение от верхней грани контейнера (как и все остальные смещения) до верхней грани айтема, которое должно быть у него после скролла.

Вроде бы всё готово, но полагаться на delay не хочется при показе клавиатуры, к тому же этот delay заметен при скролле, когда открывается клавиатура. Если его сделать меньше, то есть риск не попасть. Здесь нам на помощь приходят insets. Для работы с инсетами в Compose Google создала проект accompanist, в котором в том числе есть библиотека accompanist-insets. Я опущу детали подключения, это можно посмотреть в официальной документации.

В библиотеке есть удобные extension функции для Modifier, которые будут для вашей Composable функции добавлять нужные отступы. Мы воспользуемся Modifier.navigationBarsWithImePadding() и проставим этот modifier в нашу рутовую функцию Scaffold для нашего экрана со списком.

navigationBarsWithImePadding() автоматически добавляет отступы снизу для нав бара и клавиатуры, если она есть на экране. Таким образом, когда появится клавиатура, наша функция Scaffold, внутри которой находится наш LazyCloumn перерисуется. Далее мы можем добавить SideEffect

Этот SideEffect будет запускаться каждый раз после завершения рекомпозиции, таким образом у нас будут актуальные размеры нашего контейнера, чтобы правильно рассчитать смещения для скролла. Также SideEffect нам нужен для вызова метода скролла, так как он suspend, а делать launch корутин в Composable функциях нельзя, их нужно делать как раз в сайд эффектах.

Чтобы SideEffect не запускался всё время (рекомпозиции могут происходить очень часто), нам нужно поставить условие.

В самом начале мы проверяем, есть ли у нас вообще сейчас айтем в фокусе. Эта информация у нас есть в модели для айтема, так как мы по-разному рисуем сам айтем в зависимости от того, в фокусе он или нет.

Потом проверяем, есть ли на экране клавиатура сейчас

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

Как видно, скролл стал намного лучше выглядеть – теперь он происходит сразу, как только появляется клавиатура, и мы теперь не полагаемся на delay.

Работа с elevation в тулбаре в зависимости от скролла

Для того, чтобы знать, находится ли скролл в начальной позиции или нет, мы добавили лямбду

В кейсе с Column extension функция будет такая

Вот, что у нас получилось.

Покажите мне код

Экран EditTagsScreen со списком ярлыков, где мы скроллили к айтему в фокусе при показе клавиатуры.

Composable функция ярлыка EditTagBlock.

Composable функция ScrollAwareTopAppBar, которая работает с elevation и цветом фона в зависимости от скролла. Её применение можно посмотреть на том же EditTagsScreen.

Источник

Дорогой веб-дизайнер, скролить — это естественно, не нужно вмешиваться в этот процесс

Большая картинка + стрелка вниз = ленивый дизайн

Все мы такое видели. Вы заходите на сайт, и вот она: огромная красивая картинка во весь экран… Это огромный ( каламбур) тренд веб-дизайна, и, похоже, многим он нравится.

Ну хорошо — нравится не всем. Постойте… Что это?

Почему ты кричишь на меня, стрелка вниз? Или мне называть тебя “скреллка” (скролл + стрелка)? Эй… Я знаю, как пользоваться компьютером! Я по натуре исследователь. Я скролил всю жизнь, я не глупый 🙁 Пожалуйста, не указывай мне, что делать. Это грубо.

“Если что-то приходится объяснять — это не работает” — Милтон Глейзер

Дорогой дизайнер

Вы нарушаете процесс пользовательского восприятия на самом, пожалуй, понятном этапе взаимодействия со страницей. Все люди знают, как скролить, и ваше дизайнерское решение разрушает ментальную модель. Разве не видите? Линии фолда нет, страничка в порядке. Все дело в так называемой проблеме аффорданса. Стрелка — не выход, в этом контексте она смотрится нелепо и создает шум. Дизайнер не должен предлагать пользователям подобный опыт.

Использовать стрелку, чтобы попросить пользователя поскролить страничку — все равно что написать “нажми сюда” на кнопке, которая не выглядит как кнопка. Это не дизайн. Это даже не искусство, раз приходится объяснять, что делать.

В стрелке нет никакого смысла — она лишь решает проблему, которую вы создали сами. Это решение бесполезно: вместо того чтобы сообщать, оно заставляет.

Ищите системное погружение в тему? Загляните в блог для дизайнеров.

“Но клиенты хотят картинку на весь экран! Боже, что же делать?”

Для начала успокойтесь. Мы все тут дизайнеры. Мы можем это исправить.

Стрелка для прокрутки? Вы можете лучше!

В исследовании Huge есть пара интересных моментов. Во-первых, мы видим, что некоторые пользователи просто пропускают часть контента, если возможность скролинга недостаточно очевидна. Во-вторых, у проблемы есть несколько решений. У скрелки очень хороший результат, но стоит ли тестировать это решение?

Сравните результаты “стрелки для прокрутки” и “короткого изображения”. Они буквально одинаковые. Теперь сравните “стрелку для прокрутки” и “полное изображение”. Для меня очевидно, что в случае со стрелкой пользователи скролили страницу, потому что она кричала им об этом. Стрелка работает, но создает не самый приятный опыт взаимодействия. Если люди понимают, что под картинкой есть контент, они и так будут скролить.

Используйте легкую анимацию (но не анимированную стрелку)

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

В первом примере контент всплывает снизу и сразу же исчезает. Он как бы говорит: “Привет, я тут. Если я тебе нужен — ты знаешь, что делать”:

Если для главной картинки вы используете эффект параллакса, примените его и для всплывающей подсказки. Она станет более заметной, а поведение страницы будет последовательным. Если картинка уменьшается, когда пользователь скролит, она должна делать то же самое на всплывающей подсказке:

Если блоков несколько, можно использовать “танцующую” анимацию:

Не скрывайте контент, возьмите его под контроль

Android-приложение Google Fit показывает только часть первой карточки под большой круговой диаграммой. Оно как бы намекает: там еще есть что посмотреть! Это интуитивный и элегантный подход, поскольку дополнительные элементы не бросаются в глаза. Они хорошо воспринимаются, в то же время оставляя пространство для основной диаграммы.

В таком подходе нет ничего нового. В 2006 году Джаред Спул уже говорил о том, как обрезка фото может повысить очевидность скролинга.

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

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

Только будьте осторожнее с уровнем прозрачности. Если контент слишком бледный — это уже не круто. Да, и не забудьте убрать прозрачность, когда пользователь начнет скролить страничку или взаимодействовать с контентом 🙂

Мы уже знаем: простота — это очень сложно. Но иногда то, что кажется простым решением, — всего лишь лень. Это решение может и легко спроектировать, но не всегда легко и приятно использовать.

Остановите шум. Пообещайте, что избавитесь от этой стрелки!

Если вам понравилась статья и перевод, дайте нам знать — нажмите кнопку Recommend

А если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.

Мобильное приложение «Заметки о психике» | Mental Notes

Подкидывает идеи как привлечь, удержать и направить внимание пользователя

Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.

Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн

Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!

Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!

Источник

Scrollbar в современном CSS

Если вдруг кому интересно то я веду телеграм канал по фронтенду где выкладываю интересные статьи на разные темы а так же сам периодически пишу шорт-риды которые могут быть вам полезны.

Scrollbar это больше, чем принято считать

Всем привет! Начнем с того что scrollbar это очень обыденный элемент, присутствующий на всех веб-сайтах и в каждом приложении. Исторически сложилось так, что его было трудно кастомизировать и поэтому разработчики старались обходить стороной работу с ним если того четко не требовало ТЗ, но все же, как мне кажется, мы должны уделять им немного больше внимания. Давайте посмотрим, что мы можем сделать в 2022 году, чтобы улучшить возможности прокрутки для наших пользователей.

Основы

Выглядит достаточно просто. А теперь перейдем к более интересным моментам.

Scrollbar и темы

Если вы все еще хотите использовать стили scrollbar по умолчанию, это ваше право. Но вам нужно учитывать, если ваш сайт поддерживает темную тему. На многих сайтах при переключении на темный режим полосы прокрутки застревают в светлом. Вот как выглядят документы remix.run в Windows в темном режиме:

Это можно исправить с помощью свойства color-scheme. Прибегать к ним вам придется в разных ситуациях, в том числе – не связанных со scrollbar. У Томаса Штайнера есть отличная статья на web.dev, если вы хотите узнать об этом больше.

Особенности полосы прокрутки в различных операционных системах

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

Windows

Как я продемонстрировал в предыдущем разделе, Windows всегда отличалась самыми уродливыми полосами прокрутки, по сравнению с другими платформами. Windows 10 имеет наиболее неприглядные полосы прокрутки во всех браузерах. Даже если выбрать правильную цветовую схему, они все равно выглядят излишне квадратными и толстыми.

В Windows 11 попытались модернизировать полосы прокрутки, сделав их тоньше и накладывая друг на друга. Что касается браузеров, Firefox загружает их в таком виде всегда, в то время как Edge или Chrome – модифицируют в той или иной форме.

Особенно мне не нравится реализация Firefox, потому что полоса прокрутки тонкая и исчезает, если вы активно не взаимодействуете с ней. Что еще хуже, кажется, что нет никакого способа изменить это поведение программным путем. Firefox поддерживает опцию «Всегда показывать полосы прокрутки» только в Windows 11, но она отключена по умолчанию, и естественно большинство пользователей не догадаются ее включить. Я очень надеюсь, что этот момент будет учтен в следующем обновлении браузера. Но пока мы ничего сделать с этим не в состоянии.

macOS

Полосы прокрутки в macOS выглядят менее безобразными, но они имеют свои недостатки.

Возможно, я слишком придирчив, но я разочарован, что не могу просто переместить курсор на правый край окна браузера и использовать его для прокрутки. Это связано с тем, что macOS резервирует края для изменения размера или перемещения окна, даже если курсор все еще находится на бегунке полосы прокрутки. Это неизбежно делает и без того тонкую полосу прокрутки еще тоньше (хотя и только для прокрутки окна просмотра).

Вторая проблема более актуальна: автоматически исчезающие полосы прокрутки. Они могут способствовать созданию приятного и не загроможденного интерфейса, но. это в том случае если пользователь знает, что часть страницы является прокручиваемой. Недавно у меня был случай, когда я буквально не мог найти билет на конференцию, потому что он был скрыт за пределами обозримой области, а полоса прокрутки была невидимой. Другими словами, исчезновение полос прокрутки может в буквальном смысле стоить вам денег. Чтобы обойти эту проблему, нужно высоту полосы прокрутки сделать такой, чтобы последний элемент был наполовину виден. Или же – использовать JavaScript для определения положения прокрутки и добавления тени прокрутки.

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

Android, iOS и сенсорные экраны

У сенсорных устройств такие же тонкие, накладные и исчезающие полосы прокрутки, которые я назвал проблемой в macOS, но используются они совершенно по-другому: пользователь не взаимодействует напрямую с полосой прокрутки, а просто проводит пальцем по экрану. Кроме того, поскольку сенсорный экран обычно более маленький, на нем умещается меньше информации, и ожидается, что пользователь будет прокручивать намного чаще, чтобы просмотреть контент. Именно потому существуют специальные функции, такие как (1) прокрутка на основе импульса (инерция) и (2) визуальная подсветка или пружинная анимация при достижении края прокручиваемого контейнера. Android еще более внимательно относится к этому и показывает полосу прокрутки при первом появлении прокручиваемого элемента, а затем переключается на обычное автоматическое исчезновение полос после того, как пользователь прокрутил хотя бы один.

Я много где это использовал и мне честно говорят результат очень понравился.

Предотвращение поехавшей верстки

Здесь стоит отметить, что если вы хотите, чтобы scrollbar-gutter находилась в области просмотра, то работать с ее заставить сложно, и, возможно, будет проще переместить ее в дочерний элемент.

Еще больше возможностей для scrollbar в современном CSS

Хотя это не связано напрямую со стилем полосы прокрутки, я хочу кратко упомянуть еще несколько свойств, которые могут помочь улучшить прокрутку.

scroll-padding

scroll-padding позволяет создать смещение по краю области прокрутки. Это полезно, когда используется фиксированный заголовок (sticky header), способный закрывать заголовки фрагментов, которые прокручиваются на странице с помощью ссылок перехода или URL-адресов.

scroll-behavior

scroll-behavior позволяет включить плавную прокрутку, которая также очень удобна для переходов по ссылкам-якорям внутри страницы.

scroll-padding

Overscroll-behavior выполняет совершенно иную функцию: позволяет предотвратить цепочку прокрутки во вложенных областях прокрутки. Удобно в некоторых местах, таких как диалоговые окна и боковые панели, где вы не хотите, чтобы базовая страница начинала прокручиваться, когда вы достигаете конца текущего контейнера прокрутки.

Scroll snapping

Представленная некоторое время назад в CSS scroll snapping претерпела многочисленные улучшения и исправления. Сегодня это достаточно надежный и оптимальный способ создания чего-то вроде галереи или компонента stories с почти нулевым использованием JavaScript.

Заключение

Благодарю за прочтение публикации и надеюсь, что она вдохновит вас идти по пути улучшения scrollbar на ваших проектах. А на этом собственно все.

Источник

CSS Scroll Snap — мощное средство для создания прокручиваемых контейнеров без JavaScript

Чтобы создать прокручиваемый контейнер, нужно настроить отображение содержимого — его не должно быть видно за пределами блока. Эта задача решается с помощью CSS-свойства overflow. Можно использовать значение auto или scroll. Пример кода:

See the Pen
Basic Slider by Pochemuta (@pochemuta)
on CodePen.

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

Решить эту проблему поможет CSS Scroll Snap. Он позволяет привязать положение прокрутки к местоположению или определённым элементам после того, как пользователь прокрутил страницу. Вот классный пример использования из статьи Practical CSS Scroll Snapping:

Простой прокручиваемый контейнер

Чтобы добиться похожего эффекта, добавим в наш код два свойства: scroll-snap-type и scroll-snap-align. Первое нужно указать для контейнера, второе — для дочерних элементов.

See the Pen
Scroll Snap by Pochemuta (@pochemuta)
on CodePen.

Отлично — теперь элементы можно пролистывать свайпом, а не перетаскивать пальцем через всю ширину экрана. Посмотрим, какие ещё возможности даёт CSS Scroll Snap.

Настройка направления и строгости привязки

Свойство scroll-snap-type задаётся контейнеру и позволяет указать направление, в котором происходит привязка прокрутки (x или y), а также строгость привязки (none, mandatory или proximity).

С направлением всё просто:

Чуть сложнее увидеть разницу между значениями mandatory и proximity, которые определяют строгость привязки:

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

See the Pen
Scroll Snap mandatory by Pochemuta (@pochemuta)
on CodePen.

Текст не помещается в области видимости по высоте, последние строчки невозможно прочитать, потому что срабатывает строгая привязка к прокрутке. Чтобы такого эффекта не было, можно заменить mandatory на proximity. Но и здесь остаётся опасность пролистывания — всё зависит от браузера. Проблему можно решить с помощью свойства scroll-padding, о котором мы поговорим ниже.

Изменение точек привязки

Свойство scroll-snap-align задаётся дочерним элементам. Это те самые точки привязки, про которые шла речь при изучении значений mandatory и proximity свойства scroll-snap-type. Доступные значения scroll-snap-align — start, center и end.

Чтобы было проще понять разницу, посмотрите на этот пример:

See the Pen
Scroll Snap start, center, end by Pochemuta (@pochemuta)
on CodePen.

У первого и второго элементов значение start, у третьего — center, — у четвёртого и пятого — end. Прокрутите содержимое контейнера вверх и вниз. Проследите, как меняется позиция каждого элемента.

При горизонтальной прокрутке привязка работает аналогичным образом. Start в таком случае — левый край контейнера, end — правый край.

Управление прокруткой

Свойство scroll-snap-stop задаётся дочерним элементам и позволяет управлять прокруткой. Принимает два значения:

Значение по умолчанию — normal. Но если вы хотите исключить вероятность того, что пользователь пролистнёт важный элемент, установите значение always.

Настройка внутреннего отступа контейнера

Свойство scroll-padding задаётся контейнеру и устанавливает внутренний отступ. Вместо сокращённой записи можно использовать более конкретную: scroll-padding-top/right/bottom/left.

Внутренний отступ может быть полезен, если высота элемента больше высоты контейнера. Это решает рассмотренную выше проблему использования значения mandatory свойства scroll-snap-type. Можно просто указать, чтобы при пролистывании сверху оставалось достаточно место для отображения последних строк фрагмента текста.

See the Pen
Scroll Snap padding by Pochemuta (@pochemuta)
on CodePen.

Ещё одно полезное применение — если внутри контейнера есть фиксированный блок. Отступ поможет избавиться от перекрывания содержимого.

Настройка внешнего отступа элемента

Свойство scroll-margin задаётся дочерним элементам и устанавливает внешний отступ до позиции прокрутки. Вместо сокращённой записи можно использовать более конкретную: scroll-margin-top/right/bottom/left.

See the Pen
Scroll Snap margin by Pochemuta (@pochemuta)
on CodePen.

Например, здесь внешний отступ задан только третьему элементу. Он занимает позицию в 50px от позиции прокрутки. При этом следующие за ним элементы снова привязываются к указанной точке.

Поддержка в браузерах:

В последних версиях популярных браузеров полная поддержка. В Internet Explorer 10 и 11 — частичная.

Актуальность проверяйте на сайте Can I Use.

Узнать больше:

Ещё интересные материалы про CSS и фронтенд:

Источник

Вертикальный скроллинг страницы средствами jQuery и кроссбраузерность

Далее представлена кроссбраузерная реализация скроллинга страницы средствами jQuery.

Как всё начиналось

Подготавливаем основу

Итак, что мы будем делать. Будем делать две кнопки «вверх» и «вниз», по нажатию на которые осуществляется плавный скроллинг страницы в самое начало и в самый конец, соответственно. При этом реализация должна одинаково работать во всех современных браузерах.
Задача ясна, приступим к реализации. Для начала, напишем самое простое, а именно HTML код кнопок и соответствующие им CSS стили.

HTML код кнопок:

#up
<
width:60px;
height:60px;
position:fixed;
bottom:50px;
left:20px;
background-color:#000000;
border-radius:30px;
>
#down
<
width:60px;
height:60px;
position:fixed;
bottom:50px;
left:90px;
background-color:#000000;
border-radius:30px;
>
.pPageScroll
<
color:#FFFFFF;
font:bold 12pt ‘Comic Sans MS’;
text-align:center;
>

В итоге мы имеем два круга с надписями «Вверх» и «Вниз» в левом нижнем углу браузера.

Проблемы начинаются

//Обработка нажатия на кнопку «Вверх»
$(«#up»).click(function() <
//Необходимо прокрутить в начало страницы
$(«body»).animate(<"scrollTop":0>,»slow»);
>);

//Обработка нажатия на кнопку «Вниз»
$(«#down»).click(function() <
//Необходимо прокрутить в конец страницы
var height=$(«body»).height();
$(«body»).animate(<"scrollTop":height>,”slow”);
>);

Добавим рюшечек и бантиков

Итоговый вариант

Таким образом, рабочий код выглядит следующим образом:

$(document).ready(function() <
//Обработка нажатия на кнопку «Вверх»
$(«#up»).click(function() <
//Необходимо прокрутить в начало страницы
var curPos=$(document).scrollTop();
var scrollTime=curPos/1.73;
$(«body,html»).animate(<"scrollTop":0>,scrollTime);
>);

//Обработка нажатия на кнопку «Вниз»
$(«#down»).click(function() <
//Необходимо прокрутить в конец страницы
var curPos=$(document).scrollTop();
var height=$(«body»).height();
var scrollTime=(height-curPos)/1.73;
$(«body,html»).animate(<"scrollTop":height>,scrollTime);
>);
>);

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

Резюме

В итоге мы получили очень простую реализацию скроллинга страницы, которая работает в любом современном браузере.
Испытания проводились для DOCTYPE: XHTML 1.0 Strict в браузерах Chrome 10, Opera 10, Opera 11, Firefox 4, Internet Explorer 8, Internet Explorer 9.

Некоторые проблемы:

Источник

Практика CSS Scroll Snapping

Спецификация CSS Scroll Snap позволяет привязывать положение прокрутки к определённым элементам или местоположению после того, как пользователь прокрутил страницу или элемент. Это отличный способ для реализации следующих решений:

Браузерная поддержка и базовое использование

С тех пор, как CSS Scroll Snap был представлен в 2016 году, поддержка браузерами существенно улучшилась. К 2018 году Google Chrome (69+), Firefox, Edge, и Safari поддерживали какую-либо версию этого модуля. Согласно CanIUse, на данный момент технология поддерживается всеми современными браузерами.

Примечание от переводчика
Работоспособность приведённых в статье примеров CodePen проверена в мобильных браузерах Firefox и Chrome Canary (в Chrome Stable некоторые еще не сработали)

Использование Scroll Snapping заключается в установке свойства scroll-snap-type для элемента-контейнера и свойства scroll-snap-align для дочерних элементов. Прокрутка элемента-контейнера осуществляться с привязкой к дочерним элементам, которые вы определили. В этом самом простом случае это будет выглядеть следующим образом:

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

Вы можете использовать оба этих метода (если ваш макет позволяет это) для поддержки старых версий браузеров:

Ещё более гибкий вариант – использовать новый синтаксис, а для браузеров, которые его не поддерживают, использовать полифилл. Именно этот способ я использую в примерах ниже.

Свойства контейнера

Как и в случае с любым другим свойством, неплохо бы познакомиться со значениями, которые оно принимает. Свойства из спецификации » scroll snap » применяются как к родителю, так и к дочерним элементам, с определёнными значениями для каждого. Подобно тому, как в Flexbox или CSS Grid родитель становится «flex-» или «grid-» контейнером, можно сказать, что здесь родитель становится scroll-контейнером.

Далее представлены свойства и значения для родительского контейнера и описание принципа их работы.

scroll-snap-type: «mandatory» vs «proximity»

Значение » mandatory » определяет поведение, при котором всякий раз, когда пользователь прекращает прокрутку, браузер должен возвращать её к точке привязки.

Значение » proximity » менее строгое – оно означает, что браузер может возвращаться к точке привязки, если ему это покажется уместным. Из моего опыта, если задано это значение, срабатывание происходит, если прокрутка остановилась в пределах нескольких сотен пикселей от точки привязки.

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

scroll-padding

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

Свойства дочерних элементов

Теперь давайте перейдём к свойствам дочерних элементов

scroll-snap-align

Данное свойство позволяет указать, какая сторона элемента должна прижиматься к контейнеру. У свойства есть три возможных значения: » start «, » center » и » end «.

Значения определяются относительно направления прокрутки. Если вы прокручиваете элемент по вертикали, » start » подразумевает верхний край элемента, если по горизонтали – левый. Значения » center » и » end » работают по тому же принципу. Для каждого направления прокрутки можно устанавливать своё значение, разделив их пробелом.

scroll-snap-stop: «normal» vs «always»

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

Это поведение можно изменить, задав любому дочернему элементу свойство » scroll-snap-stop: always «. Это заставляет прокручиваемый контейнер остановиться на этом элементе, прежде чем пользователь сможет продолжить скролить.

Давайте рассмотрим несколько примеров использования технологии «Scroll Snap».

Пример 1: Вертикальный список

Чтобы в вертикальном списке задать привязку для каждого дочернего элемента, нужна всего пара строк CSS. Сперва мы говорим контейнеру привязываться к элементам вдоль вертикальной оси:

Затем мы определим точки привязки. Здесь мы указываем, что точкой привязки должен стать верх каждого элемента:

Пример 2: Горизонтальный слайдер

Чтобы сделать горизонтальный слайдер, мы говорим контейнеру привязываться к элементам при прокрутке по оси X. Дополнительно используем свойство » scroll-padding «, чтобы убедиться, что дочерние элементы привязаны к центру контейнера.

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

Пример 3: Вертикальная прокрутка полноэкранных блоков

Мы можем установить точки привязки непосредственно на элементе:

Затем мы задаем каждому блоку размер области видимости и определяем точку привязки по верхнему краю блока:

Пример 4: Горизонтальная прокрутка полноэкранных блоков

Здесь используется та же концепция, что и в версии с вертикальной прокруткой, но с установкой точек привязки на оси X.

Пример 5: Двухмерная сетка изображений

Привязка прокрутки (scroll snapping) может работать в двух измерениях одновременно. И снова-таки, мы можем установить непосредственно на элементе:

Затем мы определяем левый верхний угол каждой плитки как точку привязки:

Некоторые мысли об удобстве для пользователей

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

Достоинством реализованного в CSS управления привязкой прокрутки является то, что вы не получаете прямой контроль над позицией прокрутки. Вместо этого, вы просто даёте браузеру список позиций для привязки таким образом, который соответствует платформе, способу ввода и пользовательским предпочтениям. Это значит, что поведение прокрутки, которое вы создаёте, на любой платформе будет ощущаться как нативное (то есть, с использованием тех же анимаций и т.д).

Считаю это ключевым преимуществом привязки прокрутки, реализованной с помощью CSS, перед JavaScript библиотеками, предлагающими схожую функциональность.

По моим личным ощущениям, это работает достаточно хорошо, особенно на мобильных устройствах. Возможно, из-за того, что «scroll snapping» уже является частью встроенного в мобильные платформы UI. Вспомните главный экран на iOS и Android устройствах – это, по сути, горизонтальный слайдер с точками привязки. Взаимодействие в Chrome на Android особенно приятно, потому что воспринимается как обычная прокрутка, но область видимости всегда останавливается на точке привязки:

Для реализации такого поведения, определённо нужно проводить некоторые математические вычисления. Благодаря CSS Scroll Snapping мы добиваемся такого же результата без этого.

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

Заключение

Если относиться к этому ответственно, привязка прокрутки может стать полезным инструментом. Точки привязки CSS позволяют вам включиться во встроенный в браузер процесс работы с прокруткой без ущерба плавности интерфейса. С появлением JavaScript API (потенциально на горизонте) они станут еще более мощными.

Источник

Прокручиваемый HTML-блок

Создаем блок с прокручиваемым текстом с помощью CSS и HTML

Создать прокручиваемый HTML-блок ( скролл для сайта ) довольно просто.

Что делать с дополнительным текстом?

Когда текста больше, чем может поместиться в доступное пространство макета, у вас есть несколько вариантов:

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

HTML и CSS для этого :

Но для того, чтобы это сработало, также нужно задать для этого блока div свойства ширины и высоты, чтобы определить границы контейнера.

Вы можете добавить полосы прокрутки не только для текста

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

В этом примере изображение размером 400 на 509 пикселей размещено внутри абзаца, размер которого составляет 300 на 300 пикселей.

Полосы прокрутки могут использоваться в таблицах

Длинные таблицы могут быть очень трудными для восприятия, но, помещая их в блок div ограниченного размера, а затем, добавляя свойство overflow ( как способ сделать скролл ), можно создавать таблицы с большим количеством данных, которые не займут слишком много пространства на странице,

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

Firefox поддерживает использование overflow для тегов TBODY

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

Вадим Дворников автор-переводчик статьи « HTML Scroll Box »

Источник

Морфологический разбор слова «скролить»

Морфологический разбор «скролить»:

«Скролить»

Смотрите также:

Синтаксический разбор «Я не люблю, когда математики, знающие намного больше меня, не могут ясно выражать свои мысли.»

Морфологический разбор слова «скролить»

Фонетический разбор слова «скролить»

Карточка «скролить»

Разбор частей речи

Далее давайте разберем морфологические признаки каждой из частей речи русского языка на примерах. Согласно лингвистике русского языка, выделяют три группы из 10 частей речи, по общим признакам:

1. Самостоятельные части речи:

2. Служебные части речи:

3. Междометия.

Ни в одну из классификаций (по морфологической системе) русского языка не попадают:

Морфологический разбор существительного

План морфологического разбора существительного

«Малыш пьет молоко.»

Малыш (отвечает на вопрос кто?) – имя существительное;

Морфологический разбор слова «молоко» (отвечает на вопрос кого? Что?).

Приводим ещё один образец, как сделать морфологический разбор существительного, на основе литературного источника:

«Две дамы подбежали к Лужину и помогли ему встать. Он ладонью стал сбивать пыль с пальто. (пример из: «Защита Лужина», Владимир Набоков).»

Дамы (кто?) — имя существительное;

Лужину (кому?) — имя существительное;

Ладонью (чем?) — имя существительное;

Пыль (что?) — имя существительное;

(с) Пальто (С чего?) — существительное;

Морфологический разбор прилагательного

Имя прилагательное — это знаменательная часть речи. Отвечает на вопросы Какой? Какое? Какая? Какие? и характеризует признаки или качества предмета. Таблица морфологических признаков имени прилагательного:

План морфологического разбора прилагательного

Полная луна взошла над городом.

Полная (какая?) – имя прилагательное;

Вот еще целый литературный отрывок и морфологический разбор имени прилагательного, на примерах:

Девушка была прекрасна: стройная, тоненькая, глаза голубые, как два изумительных сапфира, так и заглядывали к вам в душу.

Прекрасна (какова?) — имя прилагательное;

Стройная (какая?) — имя прилагательное;

Тоненькая (какая?) — имя прилагательное;

Голубые (какие?) — имя прилагательное;

Изумительных (каких?) — имя прилагательное;

Морфологические признаки глагола

Согласно морфологии русского языка, глагол — это самостоятельная часть речи. Он может обозначать действие (гулять), свойство (хромать), отношение (равняться), состояние (радоваться), признак (белеться, красоваться) предмета. Глаголы отвечают на вопрос что делать? что сделать? что делает? что делал? или что будет делать? Разным группам глагольных словоформ присущи неоднородные морфологические характеристики и грамматические признаки.

Морфологические формы глаголов:

Морфологический разбор глагола

Морфологический разбор глагола пример

Чтобы понять схему, проведем письменный разбор морфологии глагола на примере предложения:

Вороне как-то Бог послал кусочек сыру. (басня, И. Крылов)

Послал (что сделал?) — часть речи глагол;

Следующий онлайн образец морфологического разбора глагола в предложении:

Какая тишина, прислушайтесь.

Прислушайтесь (что сделайте?) — глагол;

План морфологического разбора глагола онлайн бесплатно, на основе примера из целого абзаца:

— Его нужно предостеречь.

— Не надо, пусть знает в другой раз, как нарушать правила.

— Подождите, потом скажу. Вошел! («Золотой телёнок», И. Ильф)

Предостеречь (что сделать?) — глагол;

Пусть знает (что делает?) — часть речи глагол;

Нарушать (что делать?) — слово глагол;

Подождите (что сделайте?) — часть речи глагол;

Вошел (что сделал?) — глагол;

Источник

Поиск ответа

Всего найдено: 10

Ответ справочной службы русского языка

Рекомендуем вариант: Одна из самых влиятельных музыкальных групп, группа The Roll ing Stones, — участник фестиваля Glastonbury!

Здравствуйте. Как правильно написать кириллицей словосочетание Roll Up? Спасибо.

Ответ справочной службы русского языка

Нормативной рекомендации нет. Возможно: ролап.

Ответ справочной службы русского языка

Ответ справочной службы русского языка

«Русским орфографическим словарем» РАН (4-е изд. М., 2012) установлено написание скроллинг.

В дополнение хотелось бы узнать, какое сокращение правильно: Зам. начальника или замначальника?

Очень жду Вашего ответа. С уважением, Наталия.

Ответ справочной службы русского языка

Правильно: зам. начальника и замначальника.

Ответ справочной службы русского языка

Добрый день!
Какого рода Toyota Co roll a (без предшествующего ей слова автомобиль)?
Спасибо.

Ответ справочной службы русского языка

Корректно согласование по женскому роду.

Статья на сайте Русской службы Би-Би-Си называется «Оператор МТС оспорит аннуляцию лицензии в Узбекистане» (http://www.bbc.co.uk/russian/ roll ing_news/2012/08/120813_rn_mts_license_uzbekistan.shtml). Вопрос: следует ли использовать в данной статье слово «аннулирование» вместо слова «аннуляция»?

Ответ справочной службы русского языка

Можно использовать оба слова, это синонимы, обозначающие процесс по глаголу «аннулировать».

Здравствуйте! Скажите, пожалуйста, как пишется элемент экс- с названием, представляющим собой сочетание слов? Например, как правильно написать экс(-)»Машина Времени», экс(-) Roll ing Stones?

Ответ справочной службы русского языка

И в третий раз 🙂 Подскажите, корректно ли составлено следующее предложение: «Чтобы просмотреть оставшуюся информацию, необходимо использовать полосу прокрутки (sc roll bar): каждое окно имеет вертикальную и горизонтальную полосу прокрутки». Интересует адекватность двоеточия перед фрагментом, ранее заключавшемся в скобки. Спасибо. P.S. Почему не отвечаем?

Ответ справочной службы русского языка

Источник

Проскролить что это – Что такое троллинг, кто такие тролли и как они троллят | Создание сайтов и заработок в сети

Скроллинг — Википедия

Материал из Википедии — свободной энциклопедии

Скроллинг — форма представления информации, при которой содержимое (текст, изображение) двигается в вертикальном или горизонтальном направлении. Таким образом, скроллинг не изменяет содержимое, но передвигает «камеру».

Выделяют три типа скроллинга:

Чаще всего, скроллинг применяют для того чтобы показать длинный список участвующих в съёмке и подготовке материала.

Широко известен скроллинг текста в начале фильмов серии «Звёздные войны».

В некоторых программах, в частности, новостных, применяется «бегущая строка» — горизонтальный скроллинг текста в нижней части экрана.

Microsoft IntelliMouse с качающимся колесом

Также скроллингом называют колёсико мыши и само действие прокрутки содержимого окна.

Колёсико мыши широко используется в компьютерных играх.

Скроллинг часто применяется в программах преобразования текста в речь (Говорилка и т. п.) при отслеживании читаемого текста.

Скролить: что это и что значит проскролить

Есть рутинные действия, выполняя которые, никто не задумывается об их названии. Пример из классики — мольеровский герой, узнавший, что всю жизнь говорил прозой. Вряд ли вы испытаете подобную радость, узнав, что привычное движение при просмотре информации на компьютере в интернет-сленге означает «скролить», но все же…

Происхождение слова

Скролить от англ. «scroll» — свиток, спираль, крутить, прокручивать.

В английском языке в списке компьютерных терминов давно укрепилось выражение «scroll through the text» — прокручивать текст на экране.

Значение слова

Понятие «скролить» в русском языке полностью совпадает с иностранным оригиналом и означает «перелистывать, сдвигать текст на экране».

Иногда можно услышать «скролл» как существительное. Среди художников и архитекторов так иногда называют красивый завиток.

Примеры использования термина

На клавиатуре любого компьютера есть кнопка «scroll lock», запрет прокручивания текста на странице. Нажав на нее, скролить экран станет невозможно.

«Could you scroll down a few lines? » — Не могли бы вы прокрутить на несколько строк вниз?

Кроме того, скролом называют колесико компьютерной мышки. Скролить — также крутить его, вызывая ответное движение просматриваемой страницы.

Словарь интернет-сленга регулярно пополняется за счет заимствований, не добавляющих ничего нового к значению, зато звучащих интересней. Чтобы с легкостью пользоваться сленговым словарем, узнайте также, что такое топик, миракл, крафт.

скроллить — Викисловарь

Морфологические и синтаксические свойства[править]

Глагол, несовершенный вид, переходный, тип спряжения по классификации А. Зализняка — 4a.

Корень: -скролл-; суффикс: -и; глагольное окончание: -ть.

Произношение[править]

Семантические свойства[править]

Значение[править]

Синонимы[править]

Антонимы[править]

Гиперонимы[править]

Гипонимы[править]

Родственные слова[править]

Этимология[править]

Фразеологизмы и устойчивые сочетания[править]

Перевод[править]

Библиография[править]

Скроллинг: зачем на сайте нужен скролл

Прокрутка, скролл, скроллинг (от англ. scroll, scrolling) – это форма передачи информации, при котором текст или изображение передвигается в вертикальном либо в горизонтальном направлении, чтобы увидеть дополнительную информацию в окне.

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

Тот факт, что скроллинг стал обычным делом и хорошо воспринимается пользователями, подтверждают данные исследований. Оказывается, что:

Исследуя юзабилити страниц, эксперты Software Usability Research Laboratory пришли к выводу, что длинные тексты со скроллом пользователи читают быстрее, чем те же тексты, но с разбивкой на страницы.

Это следует учитывать при разработке сайта. Важно разбить текст на «точки прокрутки», т.е. выделить в информации ключевые моменты. Если это не делать, то может возникнуть «усталость от скроллинга», что приведет либо к эффекту «зомби-скроллинга», при котором пользователь не воспринимает информацию либо к «отказу в гневе», когда пользователь уходит с сайта.

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

Правила юзабилити скроллина

Прежде всего, нужно так организовать контент, чтобы его было легко прокручивать. Вот несколько практических советов, как это сделать:

Это феномен возникает, когда пользователь думает, что внизу страницы уже нет контента. Это происходит по двум причинам:

Чтобы дать понять пользователям, что на странице внизу еще есть полезная информация учтите следующее:

Скроллинг — это… Что такое Скроллинг?

Скроллинг — форма представления информации, при которой содержимое (текст, изображение) двигается в вертикальном или горизонтальном направлении. Таким образом, скроллинг не изменяет содержимое, но передвигает «камеру».

Выделяют три типа скроллинга:

Кино и телевидение

Чаще всего, скроллинг применяют для того чтобы показать длинный список участвующих в съёмке и подготовке материала.

Широко известен скроллинг текста в начале фильмов серии «Звёздные войны».

В некоторых программах, в частности, новостных, применяется «бегущая строка» — горизонтальный скроллинг текста в нижней части экрана.

Компьютеры

Также скроллингом называют колесико мыши и само действие прокрутки содержимого окна.

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

См. также

В этой статье не хватает ссылок на источники информации.

Информация должна быть проверяема, иначе она может быть поставлена под сомнение и удалена.
Вы можете отредактировать эту статью, добавив ссылки на авторитетные источники.
Эта отметка установлена 14 мая 2011.