Стилизация полосы прокрутки с помощью CSS. Увеличение полосы прокрутки в Windows Изменить скролл css

Каким боком сегодняшняя хитрость относится к нашему сайту? На первый взгляд, никаким. Но если на вашем Маке в разделе Boot Camp живёт Windows, то вы уже наверняка заметили, что в Microsoft менять направление скроллинга мыши и трекпада не планировали и не собираются. Из-за этого получается, что в Mac OS X контент в окнах будет следовать за движением пальца (т.е. reverse scrolling), а в Windows вы будете двигать ползунок на экране, а сам контент будет ехать в другую сторону.

В общем, если перестроиться с одного подхода к управлению мышью на другой у вас не получается, пора переходить к решительным действиям. Есть два пути (вариант с удалением Windows и её переносом в виртуальную машину рассматривать не будем):

• отключить обратный скроллинг в Lion или Mountain Lion . Это делается в настройках системы, в пультах «Мышь» и «Трекпад» соответственно
• включить обратный скроллинг в Windows . Как ни странно, там для этого предусмотрен параметр в системном реесте, правда, найти его — отдельное приключение

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

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

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

Обратите внимание на первую строку, начиная с букв VID (например, VID_203A&PID_FFFC&REV_0100&MI_01). Запомните эту комбинацию.

На клавиатуре нажмите Command+R, в открывашемся окошке введите regedit и нажмите Enter. Откроется редактор реестра Windows. Слева выберите ветку HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Enum\HID . Вы увидите список мышей и трекпадов, обозначенных комбинациями VID, PID и MI. Вам нужно будет опознать здесь настраиваемое устройство:

Внутри устройства вы можете обнаружить ещё несколько папок. В каждой из них нужно зайти внутрь папки Device Parameters и изменить значение параметра FlipFlopWheel с 0 на 1. После перезагрузки в Windows заработает обратный скроллинг.

Что обычно происходит, когда человек с толстыми пальцами касается полосы прокрутки, пытаясь переместить ее вверх, вниз или поперек. Особого успеха он не добьется, не так ли? Эта проблема беспокоит некоторых людей, использующих Windows 8 или 8.1 на планшетах или ноутбуках с сенсорным экраном.

Полоса прокрутки (или скроллбар) представляет собой вертикальный или горизонтальный элемент интерфейса, который всегда есть там, где пользователь может прокручивать содержимое. Она отображается с крайней стороны экрана и иногда в нижней части экрана. Если вам недостаточно стандартной ширины скроллбара в Windows 8/8.1, вы можете увеличить ее, а я расскажу вам, как это сделать.

Для достижения нашей цели мы будем использовать инструмент «Редактор реестра». Чтобы его запустить, нажмите Win + R на клавиатуре, затем введите команду regedit в строку диалогового окна «Выполнить» и нажмите Enter.

Когда на экране появится окно редактора реестра, перейдите к следующему разделу:

HKEY_CURRENT_USER\Control Panel\Desktop\WindowMetrics

В правой панели редактора реестра найдите параметр «ScrollHeight» и дважды щелкните по нему левой кнопкой мыши.

На экране у вас появится окно «Изменение строкового параметра». В поле «Значение» введите желаемое значение. В качестве значения по умолчанию для ширины полосы прокрутки указано -225. Чтобы удвоить ширину, введите -500. Для большинства этого должно быть достаточно, но если вам мало, вы можете увеличить ширину полосы еще больше. Для этого введите любое значение до -1500. Помните, чем больше значение, тем шире будет полоса прокрутки.

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

Это руководство должно решить вашу проблему, поскольку так вам будет значительно проще перемещать скроллбар вверх-вниз или в сторону.

Отличного Вам дня!

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

В операционной системе семейства Windows, есть определенно очень полезная функция, которая позволяет настраивать элементы Рабочего стола по отдельности. Полоса прокрутки не является исключением, правда в Windows XP и в “семерке” это делается немного по-разному.

Настройка полосы прокрутки в Windows XP

По умолчанию ширина полосы прокрутки в веб-браузере Enternet Explorer 20 px, в Mozilla Firefox и Opera 15 px.

Для увеличения ширины полосы прокрутки, кликните правой кнопкой мыши по свободному месту Рабочего стола, в открывшемся контекстном меню щелкните по пункту “Свойства” , перейдите на вкладку “Оформление” и нажмите кнопку “Дополнительно” .

В открывшемся окне “Дополнительно оформление” в разделе “Элемент” откройте выпадающий список и выберите в нем строчку “Полоса прокрутки”

Затем в разделе “Размер” введите наиболее удобную для вас ширину полосы прокрутки (ширина задается в пикселях, в этом примере я установил ее значение 40px), нажмите на “Ок” и закройте окно “Свойства экрана” щелкнув по “Применить” и “Ок”.

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

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

Настройка полосы прокрутки в Windows 7

Здесь дела обстоят немного иначе. Откройте контекстное меню Рабочего стола, как это делается написано выше, и перейдите в пункт “Персонализация” . В открывшемся окне кликните по “Цвет окна” и перейдите по ссылке “Дополнительные параметры оформления”.

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

Затем кликните по кнопкам “Применить” и “Ок”. Закройте окно “Дополнительных параметров оформления” нажатием на “Сохранить изменения” и по ”x”.

Откройте веб-браузер и убедитесь, что полоса прокрутки стала достаточно широкой.

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

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

Далее вам понадобится подключить сам скрипт. Его вы можете взять из архива который скачаете по ссылке выше. Файл со скриптом называется custom_scrollbar.min.js . В статье что я рекомендовал есть примеры, как подключать файлы со скриптами. делать это следует после библиотеки.

Чтобы запустить наш скрипт и параллельно задать настройки прокрутке, нужно добавить еще один небольшой скрипт:

$(window).load(function(){ $("body").mCustomScrollbar({ theme:"dark-3" }); });

В данном примере есть только одна настройка - указана тема оформления dark-3 . Тем у данной прокрутки много. Можете указать любую. Все их можно взять из списка ниже или из файла стилей, об этом позже. В общем, просто копируете название и добавляете в скрипт выше.

• light
• light-2
• dark-2
• light-thick
• dark-thick
• light-thin
• dark-thin
• rounded
• rounded-dark
• rounded-dots
• rounded-dots-dark
• 3d-dark
• 3d-thick
• 3d-thick-dark
• minimal
• minimal-dark
• light-3
• dark-3
• inset
• inset-dark
• inset-2
• inset-2-dark
• inset-3
• inset-3-dark

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

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

$(window).load(function(){ $("body").mCustomScrollbar({ theme:"dark-3", scrollInertia:3000 }); });

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

Так же у вас на сайте должны будут установлены определенные стили. Чаще всего они и так будут установлены, но вдруг это не так, то добавьте их себе.

Body{ margin: 0; padding: 0; } html, body{ height: 100%; }

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

На этом все, спасибо за внимание. 🙂

Инструкция

Откройте закладку «Параметры указателя» (для Windows XP) или закладку «Перемещение» (для Windows 9x и ME) и установите бегунок «Скорость перемещения указателя» в нужную позицию.

Нажмите кнопку «Применить» для выполнения команды и перейдите на вкладку «Кнопки мыши».

Нажмите кнопку «Применить» для выполнения команды и перейдите на вкладку «Прокрутка» («Колесико» или «Кнопки мыши» в зависимости от версии Windows).

Установите желаемую скорость и нажмите кнопку OK для применения выбранных изменений.

Перейдите на вкладку «Указатели» и выберите нужную схему из предлагаемых стандартных схем указателя в списке «Схемы».

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

Выберите пункт «Внешний вид и персональные данные» и откройте «Параметры полосы прокрутки Windows».

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

Выполните клик правой кнопки мыши на поле полосы прокрутки для вызова контекстного меню и выберите пункт «Добавить мини-приложение» для добавления гаджетов.

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

Полезный совет

Используйте раздел «Специальные возможности» в «Панель управления» для включения опции «Управление с клавиатуры» при поломке мыши.

Источники:

• XPspace.net Установка и настройка Windows XP
• плавная вертикальная прокрутка

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

Инструкция

После тэга вставьте код:

body { scrollbar-face-color:#5997CA;
scrollbar-shadow-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #5997CA;
scrollbar-darkshadow-color: #5997CA;
scrollbar-track-color: #F6F6F6;
scrollbar-arrow-color: #F6F6F6; }

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

Это наиболее простой способ, но кроме него есть еще один - тот же самый код с вашими настройками цветов полосы прокрутки в виде css-файла и загрузить его . Для этого откройте в блокноте вышеприведенный код без тэгов . Сохраните файл с кодом и назовите его scroll.css. Затем загрузите на туда же, где расположена страница, в которой требуется изменить полосу прокрутки.

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

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

Вам понадобится

• Интернет или любой учебник по html

Инструкция

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

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

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

Теперь вы обязательно должны протестировать свои доработки. Чтобы полоса прокрутки одинаково смотрелась во всех браузерах, проверьте ее на основных - Internet Explorer, Mozilla Firefox и Opera. Если она не работает на одном из них, вернитесь к первому этапу и исправьте ошибки.

Полезный совет

Есть простой способ создания полосы прокрутки для web-страницы. Задайте параметр высоты для вашего сайта 75%, тогда скролл появится сам. Правда, его цветовые схемы все равно стоит настроить.

Источники:

• Сайт для начинающих web-разработчиков

Инструкция

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

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

Добавьте стандартный код полосы прокрутки между тегами body. Если вы не знаете о чем идет речь, скачайте любой учебник по html верстке. Там будет четко описано, такой код. Лучше всего для таких случаев иметь под рукой готовые шаблоны , чтобы можно было взять оттуда какие-то отдельные элементы программного кода, что значительно упрощает жизнь. Итак, вы нашли код. Расположите его либо непосредственно в самом коде страницы либо приложите его в таблицу css, что значительно проще, но в том случае, если вы меняете не одну, а все страницы сайта.

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

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

Источники:

• как изменить scroll

Для просмотра страниц в интернете существует опция плавной прокрутки. Она позволяет передвигаться по странице вверх и вниз более гладко и ровно. В одних браузерах эта опция встроенная (как, например, в браузере Mozilla Firefox), для других требуется установить соответствующую утилиту. Если необходимости в данной опции нет, плавную прокрутку можно просто отключить.

Инструкция

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

В меню «Инструменты» выберите пункт «Настройки». В открывшемся окне перейдите на вкладку «Дополнительные» и активируйте вкладку «Общие». В разделе «Просмотр сайтов» снимите маркер с поля, расположенного напротив строки «Использовать плавную ». Нажмите на кнопку ОК, чтобы подтвердить выбор и закрыть окно настроек. Новые настройки вступают в силу немедленно, перезапуска браузера не требуется.