Scrollbar в современном CSS
Если вдруг кому интересно то я веду телеграм канал по фронтенду где выкладываю интересные статьи на разные темы а так же сам периодически пишу шорт-риды которые могут быть вам полезны.
Scrollbar это больше, чем принято считать
Всем привет! Начнем с того что scrollbar это очень обыденный элемент, присутствующий на всех веб-сайтах и в каждом приложении. Исторически сложилось так, что его было трудно кастомизировать и поэтому разработчики старались обходить стороной работу с ним если того четко не требовало ТЗ, но все же, как мне кажется, мы должны уделять им немного больше внимания. Давайте посмотрим, что мы можем сделать в 2022 году, чтобы улучшить возможности прокрутки для наших пользователей.
Основы
Когда содержимое элемента слишком велико и не помещается в нем, то, чтобы сделать его прокручиваемым, мы можем использовать overflow: auto . Это нужно, чтобы полосы прокрутки отображались по умолчанию.
Что касается стилизации scrollbar-a, то вы можете использовать свойства scrollbar с префиксом -webkit в сочетании со стандартными свойствами ширины: scrollbar-width и цвета: scrollbar-color. На эту тему есть множество публикаций, поэтому я не буду вдаваться в подробности. Если вы еще не знакомы с этими свойствами, я рекомендую вам ознакомиться с руководством, составленным Ахмадом Шейдидом.
Так же я хочу упомянуть плагин postcss-scrollbar , который генерирует свойства полосы прокрутки с префиксом -webkit из стандартных свойств, что позволяет вам получить кросс-браузерные стили только с помощью допустим такого кода:
.scroll-container < overflow: auto; scrollbar-width: thin; scrollbar-color: hsl(0 0% 50%); /* postcss-scrollbar will add the -webkit version automatically! */ >Выглядит достаточно просто. А теперь перейдем к более интересным моментам.
Scrollbar и темы
Если вы все еще хотите использовать стили scrollbar по умолчанию, это ваше право. Но вам нужно учитывать, если ваш сайт поддерживает темную тему. На многих сайтах при переключении на темный режим полосы прокрутки застревают в светлом. Вот как выглядят документы remix.run в Windows в темном режиме:
Это можно исправить с помощью свойства color-scheme. Прибегать к ним вам придется в разных ситуациях, в том числе – не связанных со scrollbar. У Томаса Штайнера есть отличная статья на web.dev, если вы хотите узнать об этом больше.
html < /* defer to OS preference */ color-scheme: dark light; /* override, assuming the theme toggler sets a data-theme attribute */ &[data-theme=light] < color-scheme: light; >&[data-theme=dark] < color-scheme: dark; >>Особенности полосы прокрутки в различных операционных системах
В данном разделе я буду размышлять о различных окружениях, поведении в них полос прокрутки и проблемах, связанных с тем или иным поведением, а также выскажу некоторые свои предположения. Если вас интересует только код, смело прокручивайте этот раздел до конца.
Windows
Как я продемонстрировал в предыдущем разделе, Windows всегда отличалась самыми уродливыми полосами прокрутки, по сравнению с другими платформами. Windows 10 имеет наиболее неприглядные полосы прокрутки во всех браузерах. Даже если выбрать правильную цветовую схему, они все равно выглядят излишне квадратными и толстыми.
В Windows 11 попытались модернизировать полосы прокрутки, сделав их тоньше и накладывая друг на друга. Что касается браузеров, Firefox загружает их в таком виде всегда, в то время как Edge или Chrome – модифицируют в той или иной форме.
Особенно мне не нравится реализация Firefox, потому что полоса прокрутки тонкая и исчезает, если вы активно не взаимодействуете с ней. Что еще хуже, кажется, что нет никакого способа изменить это поведение программным путем. Firefox поддерживает опцию «Всегда показывать полосы прокрутки» только в Windows 11, но она отключена по умолчанию, и естественно большинство пользователей не догадаются ее включить. Я очень надеюсь, что этот момент будет учтен в следующем обновлении браузера. Но пока мы ничего сделать с этим не в состоянии.
В Chromium все проще, там у нас гораздо больше возможностей повлиять на scrollbar, хотя бы с теми же стилями -webkit-scrollbar .
macOS
Полосы прокрутки в macOS выглядят менее безобразными, но они имеют свои недостатки.
Возможно, я слишком придирчив, но я разочарован, что не могу просто переместить курсор на правый край окна браузера и использовать его для прокрутки. Это связано с тем, что macOS резервирует края для изменения размера или перемещения окна, даже если курсор все еще находится на бегунке полосы прокрутки. Это неизбежно делает и без того тонкую полосу прокрутки еще тоньше (хотя и только для прокрутки окна просмотра).
Вторая проблема более актуальна: автоматически исчезающие полосы прокрутки. Они могут способствовать созданию приятного и не загроможденного интерфейса, но. это в том случае если пользователь знает, что часть страницы является прокручиваемой. Недавно у меня был случай, когда я буквально не мог найти билет на конференцию, потому что он был скрыт за пределами обозримой области, а полоса прокрутки была невидимой. Другими словами, исчезновение полос прокрутки может в буквальном смысле стоить вам денег. Чтобы обойти эту проблему, нужно высоту полосы прокрутки сделать такой, чтобы последний элемент был наполовину виден. Или же – использовать JavaScript для определения положения прокрутки и добавления тени прокрутки.
Но есть и хорошие новости, обе эти проблемы можно избежать путем задания пользовательского стиля.
Android, iOS и сенсорные экраны
У сенсорных устройств такие же тонкие, накладные и исчезающие полосы прокрутки, которые я назвал проблемой в macOS, но используются они совершенно по-другому: пользователь не взаимодействует напрямую с полосой прокрутки, а просто проводит пальцем по экрану. Кроме того, поскольку сенсорный экран обычно более маленький, на нем умещается меньше информации, и ожидается, что пользователь будет прокручивать намного чаще, чтобы просмотреть контент. Именно потому существуют специальные функции, такие как (1) прокрутка на основе импульса (инерция) и (2) визуальная подсветка или пружинная анимация при достижении края прокручиваемого контейнера. Android еще более внимательно относится к этому и показывает полосу прокрутки при первом появлении прокручиваемого элемента, а затем переключается на обычное автоматическое исчезновение полос после того, как пользователь прокрутил хотя бы один.
Мне очень нравится поведение по умолчанию этих scrollbar-ов и я хотел бы сохранить его. Это достижимо с помощью медиа-запроса pointer , который позволит нам условно стилизовать полосы прокрутки в зависимости от того, использует ли пользователь мышь или сенсорный экран.
@media (pointer: fine) < .scroll-container < /* . custom scrollbar styles only for desktop */ >>Я много где это использовал и мне честно говорят результат очень понравился.
Предотвращение поехавшей верстки
Одна из проблем с overflow: auto заключается в том, что оно показывает полосу прокрутки только в том случае, если содержимое переполнено. Это означает, что внезапное появление полосы прокрутки может вызвать небольшое смещение верстки. Эту проблему можно убрать с помощью overflow: overlay (в Chrome), чтобы полоса прокрутки никогда не занимала место, и / или с помощью overflow: scroll , чтобы она всегда была на месте.
В настоящее время мы можем указать браузеру, чтобы он зарезервировал место для полос прокрутки, используя scrollbar-gutter: stable . Он поддерживается в Chrome и Firefox. Если вы используете невидимый scrollbar, то этот резервный вариант должен работать так же, как scrollbar-gutter.
.scroll-container < overflow: scroll; @supports (scrollbar-gutter: stable) < overflow: auto; scrollbar-gutter: stable; >>Здесь стоит отметить, что если вы хотите, чтобы scrollbar-gutter находилась в области просмотра, то работать с ее заставить сложно, и, возможно, будет проще переместить ее в дочерний элемент.
Еще больше возможностей для scrollbar в современном CSS
Хотя это не связано напрямую со стилем полосы прокрутки, я хочу кратко упомянуть еще несколько свойств, которые могут помочь улучшить прокрутку.
scroll-padding
scroll-padding позволяет создать смещение по краю области прокрутки. Это полезно, когда используется фиксированный заголовок (sticky header), способный закрывать заголовки фрагментов, которые прокручиваются на странице с помощью ссылок перехода или URL-адресов.
.scroll-container
scroll-behavior
scroll-behavior позволяет включить плавную прокрутку, которая также очень удобна для переходов по ссылкам-якорям внутри страницы.
@media (prefers-reduced-motion: no-preference) < .scroll-container < scroll-behavior: smooth; >>scroll-padding
Overscroll-behavior выполняет совершенно иную функцию: позволяет предотвратить цепочку прокрутки во вложенных областях прокрутки. Удобно в некоторых местах, таких как диалоговые окна и боковые панели, где вы не хотите, чтобы базовая страница начинала прокручиваться, когда вы достигаете конца текущего контейнера прокрутки.
.scroll-container
Scroll snapping
Представленная некоторое время назад в CSS scroll snapping претерпела многочисленные улучшения и исправления. Сегодня это достаточно надежный и оптимальный способ создания чего-то вроде галереи или компонента stories с почти нулевым использованием JavaScript.
.scroll-container < scroll-snap-type: x mandatory; & >* < scroll-snap-align: start; >>Заключение
Благодарю за прочтение публикации и надеюсь, что она вдохновит вас идти по пути улучшения scrollbar на ваших проектах. А на этом собственно все.
Полоса прокрутки
Полоса прокрутки позволяет пользователю перемещать визуальную область экрана вверх, вниз, вправо и влево. Вертикальная и горизонтальная полоса прокрутки обычно расположены в крайней правой и нижней стороне окна. Больше всего пользователи знакомы с полосой прокрутки в связи с необходимостью почти каждый раз прокручивать интернет страницы вниз и вверх.
На изображении ниже приведен пример окна с вертикальной и горизонтальной полосой прокрутки.
Полосы прокрутки используются с помощью мыши или клавиатуры.
С помощью мыши пользователь может нажимать на стрелки, которые находятся, по оба конца полосы прокрути, жать по пустому месту полосы или перемещать ползунок полосы прокрутки зажимая левую кнопку мыши. Также для прокрутки страницы можно использовать колесо мыши.
Чтобы управлять полосой прокрутки с помощью клавиатуры, можно нажимать клавиши стрелкой и страница будет перемещаться в их направлении. (В текстовых редакторах будет двигаться курсор, а не страница)
Полоса прокрутки
Кнопка — элемент интерфейса компьютерных программ, является метафорой кнопки в технике и, соответственно, изображается схожей с ней и выполняет аналогичные функции. При нажатии на неё происходит программно связанное с этим нажатием действие либо событие.
Окно — основное понятие оконного интерфейса, интерфейсный контейнер. Кроме дочерних элементов интерфейса, окно также может содержать элементы управления самим окном. Важная особенность окон — возможность перекрываться, то есть располагаться поверх друг друга, полностью или частично закрывая нижнее окно.
Строка меню — разновидность меню, предоставляющая доступ ко всем функциям программы (или к большинству функций). Обычно строка меню располагается в верхней части окна, сразу под заголовком, но в некоторых операционных системах, например OS X, она размещается в верхней части экрана и актуальна для активного приложения.
Область уведомлений (англ. notification area) — элемент панели инструментов среды рабочего стола («панель задач» в Windows), используемый для нужд длительно запущенных, но при этом не постоянно используемых программ. Обычно находится в правом нижнем углу (левом нижнем, если порядок чтения — справа налево), но в настраиваемых GUI может помещаться в произвольное место. Имеет также неофициальное название «системный трей» (англ. system tray, от англ. tray — «поднос, поддон»)
Конте́кстное меню́ — элемент графического интерфейса операционной системы, представляющий собой список команд, вызываемый пользователем для выбора необходимого действия над выбранным объектом. Команды контекстного меню относятся к тому объекту, над которым это меню было вызвано.
Упоминания в литературе
В большинстве случаев данные всего файла не умещаются в окне. Для просмотра любого участка записи нужно использовать полосу прокрутки окна данных. Она расположена между нижним краем графиков и строкой состояния, а на концах ее находятся стрелки прокрутки. Чтобы перемещаться вдоль записи, можно щелкать кнопкой мыши на стрелках прокрутки или перетаскивать ползунок на полосе прокрутки. Прокрутка не меняет значение указателя текущей позиции, а просто перемещает видимую часть графиков относительно окна данных вместе со шкалой времени.
Кроме того, для управления прокруткой существуют решения, ориентированные не на клавиши, а на Touchpad. Некоторые производители выделяют на сенсорной панели одну или две области, расположенные вдоль правого и нижнего края, перемещая по которым палец, можно управлять вертикальной и горизонтальной прокруткой (принцип действия аналогичен работе полос прокрутки в Windows-приложениях).
Полосы прокрутки (вертикальная и горизонтальная) используются для перемещения по содержимому документа (рис. 1.35). Чем больше документ и чем больше в нем страниц, тем меньше будет ползунок посередине полос прокрутки. Позиция ползунка позволяет определить, в каком месте документа сейчас находится пользователь – в начале, в конце или посередине.
8. Чтобы фрейм, который имеет размер больший, чем размер экрана, можно было прокручивать при помощи вертикальной полосы прокрутки , нужно написать обработчик события Change для компонента VScroll. Код этого обработчика приведен в листинге 3.12.
ДИАЛ?ГОВОЕ ОКН?, прямоугольник на экране монитора персонального компьютера, служащий для введения данных, необходимых для работы программы, подтверждения действия, ответа на запрос системы или настройки каких-либо параметров. Как правило, имеет кнопки OK и «Отменить» (Cancel). Для облегчения работы пользователя многие диалоговые окна имеют в верхнем правом углу кнопку с изображением вопросительного знака. При щелчке «мышью» по этой кнопке, а затем по любому элементу диалогового окна появляется всплывающая подсказка с описанием этого элемента. Диалоговые окна часто состоят из нескольких вкладок. Так, для настройки мультимедиа-устройств в системе Windows имеются ярлычки с надписями «Аудио», «Видео», CD и др. в верхней части диалогового окна, предназначенные для доступа к различным вкладкам. В этом же диалоговом окне имеются элементы, предназначенные для регулирования «мышью», – ползунки для настройки уровня записи и воспроизведения. Если список файлов и папок каталога Windows не умещается в окне, появляется полоса прокрутки , позволяющая прокручивать информацию. Работа с диалоговым окном заканчивается подтверждением или отменой выполненных в нём действий. Для подтверждения открытия выбранного файла необходимо нажать кнопку «Открыть», а для отмены – кнопку «Отмена».
Связанные понятия (продолжение)
Бу́фер обме́на (англ. clipboard) — промежуточное хранилище данных, предоставляемое программным обеспечением и предназначенное для переноса или копирования между приложениями или частями одного приложения через операции вырезать, копировать, вставить.
Курсо́ркурсо́р на gramota.ru (лат. cursor — бегун; англ. cursor — указатель, стрелка прибора) в интерфейсе пользователя — элемент графического интерфейса, который указывает на объект, с которым будет производиться взаимодействие с помощью клавиатуры, мыши или другого устройства управления. Различают текстовый курсор, обозначающий место ввода с клавиатуры; курсор мыши (или указатель мыши) и других указывающих устройств; курсор меню. Кроме указания на объект курсор может также отображать его состояние.
Текстовый видеорежим — режим компьютерного видеоадаптера, в котором экран представлен в виде решётки знакомест (а не пикселей, в отличие от графических режимов). В каждом из знакомест может находиться один символ из ограниченного набора.
Экранное считывающее устройство — это один из видов вспомогательных технологий (вт), предназначенных для слепых людей, имеющих плохое зрение а также людей имеющих затруднения при обучении. Считывающие устройства это такие программные обеспечения, с помощью которых, их пользователи могут постигать визуальную информацию без использования зрения, например озвучивания, звуковые значки или Брайлевского дисплея.В операционных системах Windows, начиная с версии Windows 2000, встроено экранное считывающее.
Жесты мышью — способ управления программами в компьютере при помощи движений (жестов) мыши, которые преобразуются в команды.
В компьютерной среде термин панель задач — это элемент интерфейса, отображающийся на его краю, и использующийся для быстрого запуска программ или слежения за изменениями уже запущенных программ. Microsoft представила свою панель задач в Windows 95 в 1995 — это дало толчок в распространении этого элемента интерфейса в системах Windows и не только: во многих операционных системах и средах рабочего стола.
Диалоговое окно (англ. dialog box) в графическом пользовательском интерфейсе — специальный элемент интерфейса, окно, предназначенное для вывода информации и (или) получения ответа от пользователя. Получил своё название потому, что осуществляет двустороннее взаимодействие компьютер-пользователь («диалог»): сообщая пользователю что-то и ожидая от него ответа.
Панель инструментов (англ. toolbar) — элемент графического интерфейса пользователя, предназначенный для размещения на нём нескольких других элементов.
Сочетание клавиш (синонимы: горячая клавиша, шорткат , клавиша быстрого доступа, клавиша быстрого вызова, клавиатурный ускоритель; англ. keyboard shortcut, quick key, access key, hot key) (для программного обеспечения) — разновидность интерфейса взаимодействия с вычислительным устройством (компьютером, калькулятором), представляющая собой нажатие кнопки/клавиши (или сочетания клавиш) на клавиатуре, которому назначено (запрограммировано) некое действие — команды (операции), исполняемые данной системой.
Око́нный интерфе́йс — способ организации полноэкранного интерфейса программы (разновидность графического интерфейса), в котором каждая интегральная часть располагается в графическом окне — собственном субэкранном пространстве, находящемся в произвольном месте «над» основным экраном. Несколько окон, одновременно располагающихся на экране, могут перекрываться, виртуально находясь «выше» или «ниже» друг относительно друга.
Ярлы́к (англ. shortcut) — файл, служащий указателем на объект (например, файл, который требуется определённым образом обработать), программу или команду и содержащий дополнительную информацию.
Клавиши управления курсором (клавиши перемещения) — восемь клавиш на клавиатуре компьютера: ↑, ↓, ←, →, Home, End, Page Up и Page Down. На цифровой клавиатуре эти клавиши совмещены с цифрами 1…9.
Устро́йства вво́да — периферийное оборудование, предназначенное для ввода (занесения) данных или сигналов в компьютер или в другое электронное устройство во время его работы.
Флажок, флаговая кнопка, чекбокс (от англ. check box), галочка — элемент графического пользовательского интерфейса, позволяющий пользователю управлять параметром с двумя состояниями — ☑ включено и ☐ отключено. Во включённом состоянии внутри чекбокса отображается отметка (галочка (✓), или реже крестик(×)). По традиции флажок имеет квадратную форму. Рядом с флажком отображается его обозначение, обычно — подпись, реже — значок. Для увеличения площади активного элемента обычно одинаково реагирует на.
Ассоциация или ассоциирование файлов — в программном обеспечении привязывание файла (по расширению или по каким-либо другим признакам) к прикладной программе, которая обрабатывает эти файлы. При «вызове» этого файла, например, в файловом менеджере, вызовется связанная с ним программа и откроет файл.
Корзи́на — элемент графического интерфейса пользователя, предназначенный для удаления и, часто, временного хранения удалённых объектов (в некоторых реализациях — только файлов и каталогов). Корзина в ряде систем позволяет восстановить недавно удалённый объект в случае ошибки или недоразумения пользователя.
Док (англ. dock) — вид панели инструментов, часть компьютерного графического интерфейса пользователя, позволяющая запускать программы на выполнение и переключаться между работающими программами.
Дамп памяти (англ. memory dump; в Unix — core dump) — содержимое рабочей памяти одного процесса, ядра или всей операционной системы. Также может включать дополнительную информацию о состоянии программы или системы, например значения регистров процессора и содержимое стека. Многие операционные системы позволяют сохранять дамп памяти для отладки программы. Как правило, дамп памяти процесса сохраняется автоматически, когда процесс завершается из-за критической ошибки (например, из-за ошибки сегментации.
Цифрова́я клавиату́ра, цифрово́й блок (англ. Numeric keypad, Keypad, Numpad) — небольшая секция компьютерной клавиатуры, обычно находится с правого края. На цифровой клавиатуре имеются клавиши с цифрами от 0 до 9, символ десятичного разделителя (.), символы сложения (+), вычитания (−), умножения (*) и деления (/).
Многодокументный интерфейс с вкладками (англ. tabbed document interface) — разновидность графического интерфейса пользователя, в котором каждый документ отображается на отдельной вкладке общего окна.
Кадровый буфер (англ. framebuffer) (другие названия: буфер кадра, видеобуфер, фреймбуфер) — реальное или виртуальное электронное устройство или область памяти для кратковременного хранения одного или нескольких кадров в цифровом виде перед его отправкой на устройство видеовывода. Буфер может быть использован для выполнения над кадром различных предварительных операций, организации стоп-кадра, устранения мерцания изображения и др. Обычно кадр хранится в виде последовательности цветовых значений каждого.
Точка монтирования (англ. mount point) — это каталог или файл, с помощью которого обеспечивается доступ к новой файловой системе, каталогу или файлу.
Автозапуск (англ. autorun) и автоматическое воспроизведение autoplay), или управление томами (англ. Volume Management) — функция в некоторых операционных системах и средах, заключающаяся в автоматическом выполнении определённых операций при обнаружении вновь подключённого носителя данных или свежепримонтированной файловой системы.
Общий ресурс, или общий сетевой ресурс, — в информатике, это устройство или часть информации, к которой может быть осуществлён удалённый доступ с другого компьютера, обычно через локальную компьютерную сеть или посредством корпоративного интернета, как если бы ресурс находился на локальной машине.
Журнал событий (англ. Event Log) — в Microsoft Windows стандартный способ для приложений и операционной системы записи и централизованного хранения информации о важных программных и аппаратных событиях. Служба журналов событий сохраняет события от различных источников в едином журнале событий, программа просмотра событий позволяет пользователю наблюдать за журналом событий, программный интерфейс (API) позволяет приложениям записывать в журнал информацию и просматривать существующие записи.
Элеме́нт интерфе́йса — примитив графического интерфейса пользователя, имеющий стандартный внешний вид и выполняющий стандартные действия.
Вкла́дка (англ. tab) — элемент графического интерфейса пользователя, который позволяет в одном окне приложения переключение между несколькими открытыми документами или предопределёнными наборами элементов интерфейса, когда их доступно несколько, а на выделенном для них пространстве окна можно показывать только один из них.
Иконка (от англ. icon) — элемент графического интерфейса, небольшая картинка, представляющая приложение, файл, каталог, окно, компонент операционной системы, устройство и т. п. В ответ на щелчок, совершённый мышью или другим указательным устройством ввода на иконке, обычно выполняется соответствующее действие (запуск приложения, открытие файла и т. д.).
По умолча́нию — термин, используемый для обозначения значений параметров какой-либо программы, предустановленных разработчиком. Пользователь может изменить эти установки явным образом, однако, если он не сделал этого, то в качестве значений используются параметры, заданные разработчиком.
Конфигурация программного обеспечения — совокупность настроек программы, задаваемая пользователем, а также процесс изменения этих настроек в соответствии с нуждами пользователя.
Безопасное извлечение устройства (англ. Safely Remove Hardware) — компонент операционной системы, предназначенный для подготовки подключенных USB-устройств к отсоединению.
Меню́ (англ. menu, фр. menu) — элемент интерфейса пользователя, позволяющий выбрать одну из нескольких перечисленных опций программы.
Буферизация (от англ. buffer) — способ организации обмена, в частности, ввода и вывода данных в компьютерах и других вычислительных устройствах, который подразумевает использование буфера для временного хранения данных. При вводе данных одни устройства или процессы производят запись данных в буфер, а другие — чтение из него, при выводе — наоборот. Процесс, выполнивший запись в буфер, может немедленно продолжать работу, не ожидая, пока данные будут обработаны другим процессом, которому они предназначены.
Цифровая ручка — устройство ввода информации, фиксирующее рукописные символы и рисунки пользователя и оцифровывающее их. В дальнейшем они могут быть загружены в компьютер и отображены на его мониторе. Данные, полученные с помощью устройства, могут быть распознаны с помощью специализированного программного обеспечения, использоваться в различных приложениях или в качестве компьютерной графики.
Текстовый пользовательский интерфейс, ТПИ (англ. Text user interface, TUI; также Character User Interface, CUI) — разновидность интерфейса пользователя, использующая при вводе-выводе и представлении информации исключительно набор буквенно-цифровых символов и символов псевдографики. Характеризуется малой требовательностью к ресурсам аппаратуры ввода-вывода (в частности, памяти) и высокой скоростью отображения информации. Появился на одном из начальных этапов развития вычислительной техники, при развитии.
Светово́е перо́ (англ. light pen) — один из инструментов ввода графических данных в компьютер, разновидность манипуляторов.
Монтирование файловой системы — системный процесс, подготавливающий раздел диска к использованию операционной системой.
Рабо́чий стол (англ. desktop) — в компьютерной терминологии основное окно графической среды пользователя вместе с элементами, добавляемыми в него этой средой.
Всплывающее окно (англ. pop-up) — окно, открываемое на экране компьютера в результате выполнения какой-либо операции.
Проверка системных файлов (SFC) — это утилита Microsoft Windows, позволяющая пользователю находить и восстанавливать повреждения системных файлов Windows. Компонент доступен в Windows 98, Windows 2000 и всех последующих версиях операционных систем семейства Windows NT. В Windows Vista и Windows 7 проверка системных файлов встроена в защиту ресурсов Windows, которая защищает не только критичные системные файлы, но и ключи реестра, и папки. Под Windows Vista, sfc.exe может быть использован для проверки.
Композитный менеджер окон — менеджер окон, использующий возможности окружения (например, опциональной функции Composite X11-сервера или средств Windows Aero) по задействованию аппаратного ускорения для отображения прозрачности, отрисовки теней, отображения текстур, трёхмерных эффектов, анимации, экранных луп.
Дисциплина линии (англ. line discipline, ldisc) — это слой абстракции подсистемы терминальных устройств (tty) UNIX-подобных операционных систем, необходимый для имитации соответствующих возможностей аппаратного терминала. Этот слой расположен между драйвером консоли и драйвером UART.
Компью́терная клавиату́ра — устройство, позволяющее пользователю вводить информацию в компьютер (устройство ввода). Представляет собой набор клавиш (кнопок), расположенных в определённом порядке.
Синий экран смерти (англ. Blue Screen of Death, Blue Screen of Doom, BSoD) — название сообщения о критической системной ошибке в операционных системах Microsoft Windows. Существует несколько видов сообщений BSoD: для Windows 9x, Windows NT и Windows CE.
Эмулятор терминала, приложение терминала, term или tty для краткости — это программа, которая эмулирует терминал компьютера внутри некоторой другой архитектуры вывода данных на экран.
Упоминания в литературе (продолжение)
• полоса прокрутки – полоса, служащая для перемещения области просмотра по рабочей области. Имеет по концам кнопки со стрелками. Щелчок левой кнопкой мыши по такой кнопке приводит к продвижению в направлении стрелки. Кнопка без надписи на полосе прокрутки называется бегунок и служит указателем положения области просмотра в рабочей области. Перетащив его в другое место полосы прокрутки, вы тем самым перетаскиваете область просмотра. Отношение размеров бегунка к размерам полосы прокрутки равно отношению соответствующих размеров области просмотра и рабочей области;
Текстовое окно подобно окну команд: в нем также можно вводить команды, наблюдать подсказки и сообщения, выдаваемые AutoCAD. Для перемещения по окну используются полоса прокрутки или клавиши ?, ?, ?, →, Page Up и пр.
В настройках программы, которые находятся на этой же вкладке, разобраться очень просто. Подписи к флажкам подробно объясняют их назначение. Для наибольшего удобства работы с программой желательно установить все четыре флажка. При запуске «Электросчетчика» из операционной системы Windows Vista в окне могут отображаться полосы прокрутки , но это не способно испортить общее приятное впечатление от программы.
• Размер диагонали. Он определяет, сколько информации будет отображаться на экране. Это имеет большое значение, особенно для пользователей, которые любят просматривать содержимое открытого окна, не используя полосы прокрутки .
Раздел Window Elements (Элементы окна) окна Options (Настройки) управляет видимостью полос прокрутки (опция Display scroll bars in drawing Window), строки состояния (опция Display Drawing status bar), экранного меню (опция Display screen menu), использованием крупных кнопок на панелях инструментов (опция Use large buttons for Toolbar), выводом подсказок к кнопкам (опция Show ToolTips) и отображением в подсказках комбинаций клавиш для быстрого вызова команд (опция Show shortcut keys in ToolTips).
На рис. 6.10 мы видим, что в дополнение к кнопкам управления окном и полосам прокрутки окно документа содержит линейки (они могут быть как отображены, так и скрыты). Кроме того, в нижней части окна присутствует строка состояния.
• Full Screen Mode With Menu Bar (Полноэкранный режим с главным меню) – отсутствуют заголовки окон документов, а также полосы прокрутки .
Начнем с элементарного – с прокрутки окна. Если изображение полностью не помещается в окне документа, то видимую область в этом окне можно переместить. Стандартный способ для программ Windows – полосы прокрутки справа и снизу окна. Но в Photoshop есть еще и специальный инструмент Hand (Рука), расположенный в нижней части палитры инструментов (рис. 2.16).
Чтобы просмотреть все имеющиеся варианты, нужно использовать полосу прокрутки , которая расположена по правому краю меню.
Если все изображение не помещается в видимой части окна документа, в правой и нижней части окна появляются полосы прокрутки , с помощью которых можно «двигать» изображение в окне. Но есть и более удобный способ. Если все изображение не помещается в окне документов, на миниатюре изображения (на палитре Навигатор) появляется прозрачный прямоугольник с красной рамкой. Все, что находится в пределах прямоугольника, вы видите в окне документа. Все, что расположено вне рамки прямоугольника, скрыто за границами окна. Этот прямоугольник можно перемещать по миниатюре изображения. В результате в него будут попадать новые фрагменты изображения, и, соответственно, все, что вновь попало в прямоугольник, будет отображено в окне документа. Чтобы изменить положение прямоугольника на миниатюре, нужно подвести к нему указатель мыши и, удерживая левую кнопку нажатой, перемещать мышь в нужном направлении. Как только необходимая область изображения отобразится в окне документа, кнопку мыши можно отпустить (рис. 2.5). Перемещать изображение можно также с помощью инструмента Рука на панели инструментов, но об этом мы расскажем, когда будем знакомиться с этой панелью.
После этого вам нужно будет указать часовой пояс, в котором вы находитесь (рис. 2.18). Сделать это достаточно просто: откройте список и, используя полосу прокрутки , выберите из него часовой пояс, подходящий для вашего города. Затем проверьте, правильно ли указаны дата и текущее время, и при необходимости подкорректируйте их.
С помощью полосы прокрутки области навигации (не документа) вы можете быстро переместиться в другое место документа. Вначале вы переместитесь в другое место в пределах окна Навигация. Но если вы в этом окне щелкните какую-то опцию, вы окажетесь в новом месте документа.
Считается, что полосы прокрутки и кнопки, присутствующие на баннере, оказывают положительное влияние на CTR. Однако злоупотребление ими приводит к тому, что они вызывают лишь раздражение у пользователя. Кроме того, многие службы обмена баннерами запрещают использование таких эффектов, справедливо считая их дурным тоном. Особенно эффективны имитаторы полосы прокрутки, если интригующий текст уходит за пределы баннера: в этом случае проявляется обычный рефлекс, и вы непроизвольно нажимаете на скроллер.
Как стилизовать или убрать полосу прокрутки — CSS скроллбар
Стилизованные полосы прокрутки становятся популярными, думаю, вы уже сталкивались с такими сайтами, которые имеют уникальный скроллбар (к примеру, наш сайт). Есть два способа реализации этой задачи: с помощью CSS3 или используя jQuery плагин. Мы будем использовать наиболее простой — напишем CSS стили.
Примечание: стилизовать полосу прокрутки через -webkit префикс возможно только в браузерах, использующих механизм рендеринга Webkit (и Blink). То есть в Firefox и IE этот способ не сработает.
Часто бывает необходимо убрать или скрыть скроллбар css совсем. Для начала, давайте рассмотрим как это сделать.
1 Как убрать полосу прокрутки CSS
Скрыть полосу прокрутки можно как у отдельного элемента на странице, так и у всей страницы целиком. Сделать это не сложно, достаточно написать следующее свойство:
CSS /*Убрать полосу прокрутки у элемента*/ .element::-webkit-scrollbar { width: 0; } /*Убрать полосу прокрутки для всей страницы*/ ::-webkit-scrollbar { width: 0; } 2 Как изменить скроллбар CSS
Теперь давайте рассмотрим базовую структуру полосы прокрутки:
-webkit-scrollbar состоит различных псевдо-элементов.
- ::-webkit-scrollbar — это фон самого скроллбара.
- ::-webkit-scrollbar-button — кнопки направления на полосе прокрутки.
- ::-webkit-scrollbar-track — пустое пространство под индикатором прокрутки.
- ::-webkit-scrollbar-thumb — индикатор прокрутки, перетаскиваемый элемент.
Проверим как все это работает. Чтобы попробовать изменить скроллбар css, создадим пустой HTML документ. Вам необходимо добавить style.css ваш HTML файл. В разметку добавим div с id element, имеющий полосу прокрутки, чтобы применить на него наши стили.
HTML Document
3 CSS стили
Для того, чтобы у элемента div появилась полоса прокрутки, добавим следующие свойства.
CSS #element { overflow-y: scroll; background-color: #ffffff; width: 200px; height: 200px; } .overflow { min-height: 400px; }
Теперь давайте используем псевдоэлемент для создания пользовательского скроллбара. Заменим ширину по умолчанию на новую — в 7 пикселей. Затем, добавим цвет полосы через свойство background-color: #f9f9fd .
Если вы хотите изменить ширину скролла всей страницы, а не отдельного элемента, то используйте ::-webkit-scrollbar без дополнительных селекторов.
CSS #element::-webkit-scrollbar { width: 7px; background-color: #f9f9fd; }
Ширина полосы в 7 пикселей
Мы уже знаем, что скроллбар состоит из полосы, кнопки и индикатора прокрутки. Используем псевдо элемент ::-webkit-scrollbar-thumb , для того чтобы стилизовать индикатор.
CSS #element::-webkit-scrollbar-thumb { background-color: #223c50; }
Изменение цвета индикатора
Добавим свойство box-shadow полосе, чтобы добавить скроллбару контрастность. Подобрать подходящую тень можно в нашем box-shadow генераторе.
CSS #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; }
Добавление внутренней тени
В заключении: вот еще несколько вариантов, которые вы можете использовать на своем сайте.
Пример 1
Пример 2
Пример 3
Пример 4
Пример 1 #element::-webkit-scrollbar { width: 10px; background-color: #f9f9fd; } #element::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #18aaaa; } #element::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); border-radius: 10px; background-color: #f9f9fd; }
Пример 2 #element::-webkit-scrollbar { width: 10px; } #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; } #element::-webkit-scrollbar-thumb { background-color: #f2bf93; background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .25) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .25) 50%, rgba(255, 255, 255, .25) 75%, transparent 75%, transparent); }
Пример 3 #element::-webkit-scrollbar { width: 10px; } #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; } #element::-webkit-scrollbar-thumb { background-color: #356184; background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .25)), color-stop(.5, transparent), to(transparent)); }
В четвертом примере мы используем градиент. Настроить его можно в CSS генераторе градиента.
Пример 4 #element::-webkit-scrollbar { width: 10px; } #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; border-radius: 10px; } #element::-webkit-scrollbar-thumb { border-radius: 10px; background: linear-gradient(180deg, #00c6fb, #005bea); }