Увеличение полосы прокрутки в Windows. Активация обратной прокрутки в Windows Я изменил скорость прокрутки

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

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

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

1. NiceScroll.js

NiceScroll является jQuery плагином, который позволяет создать полосу прокрутки похожую на iOS.

2. NanoScroll

Данный плагин позволяет создать полосу прокрутки на вашем сайте как в Mac OS X.

3. jQuery custom content scroller

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

4. Tiny Scrollbar

Легкий jQuery плагин написанный с помощью jQuery библиотеки, который придаст красивый вид прокрутки контента и полосы прокрутки главного окна браузера.

5. Scrollbar Visibility

Легкий плагин написанный с помощью jQuery библиотеки, который придаст красивый вид прокрутки контента и полосы прокрутки главного окна браузера.

6. jScrollPane

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

7. Scrollbar Paper

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

8. jQuery Scrollbars v2

Полностью настраиваемые полосы прокрутки, а также показывает стандартные если Javascript отключен в браузере.

9. Vertical scrollbar

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

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

Инструкция

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

Выберите раздел «Мышь» для настройки параметров мыши.

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

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

Сдвиньте бегунок, регулирующий скорость двойного клика, в нужную сторону.

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

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

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

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

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

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

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

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

Нажмите кнопку «Удалить», появляющуюся в момент перемещения курсора мыши на мини-приложение.

Выберите ссылку «Загрузить мини-приложения из сети Интернет» в Галерее мини-приложений для загрузки и установки дополнительных гаджетов и выберите желаемые на веб-сайте Microsoft Gadgets.

Совет добавлен 13 октября 2011 Совет 2: Как изменить прокрутку страниц Прокрутка страниц в среде операционной системы Windows зависит от двух вещей: настроек мыши и параметров отображения полосы прокрутки. Чтобы изменить прокрутку, нужно подкорректировать два вышеупомянутых пункта. Инструкция

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

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

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

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

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

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

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

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

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

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

Установка

Вставляем данный код в Таблицу стилей (CSS)

::-webkit-scrollbar-button {
background-image:url("");
width:5px;
height:0px
}

::-webkit-scrollbar-track {
background-color:#ecedee
}

::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
border-radius: 0px;
background-color:#6dc0c8;
}

::-webkit-scrollbar-thumb:hover{
background-color:#56999f;
}

::-webkit-resizer{
background-image:url("");
background-repeat:no-repeat;
width:4px;
height:0px
}

::-webkit-scrollbar{
width: 4px;
}

Установка на этом завершена. Теперь разберем, какая строка за что отвечает.

Цвет дорожки, по которой двигается бегунок прокрутки.

Меняем ecedee на свой цвет.

::-webkit-scrollbar-track {
background-color:#ecedee
}

Цвет бегунка полосы, а так же его закругление.

Меняем 6dc0c8 на свой цвет.

Меняем значение border-radius для закругления.

::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
border-radius: 0px;
background-color:#6dc0c8;
}

Цвет бегунка при наведении на него курсора.

Меняем 56999f на свой цвет.

::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
border-radius: 0px;
background-color:#6dc0c8;
}

Основная ширина полосы прокрутки.

Меняем значение width

::-webkit-scrollbar{
width: 4px;
}

Пример

В качестве примера мы сделали прокрутку в таком стиле:

Установите на сайт данный скролл, просто скопировав следующий код:

200?"200px":""+(this.scrollHeight+5)+"px");"> ::-webkit-scrollbar-button {
background-image:url("");
background-repeat:no-repeat;
width:6px;
height:0px
}

::-webkit-scrollbar-track {
background-color:#32312e;
box-shadow:0px 0px 3px #000 inset;
}

::-webkit-scrollbar-thumb {
-webkit-border-radius: 5px;
border-radius: 5px;
background-color:#ffcb17;
box-shadow:0px 1px 1px #fff inset;
background-image:url("https://сайт/_pu/24/59610063.png");
background-position:center;
background-repeat:no-repeat;
}

::-webkit-resizer{
background-image:url("");
background-repeat:no-repeat;
width:7px;
height:0px
}

::-webkit-scrollbar{
width: 11px;
}

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

Приступим до воплощения такой доработки. Так как наш скрипт полосы прокрутки использует 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%; }

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

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

Настраивая скроллинг, важно понимать следующие моменты:

1. Скорость прокрутки внешней мыши и тачпада регулируются разными настройками.

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

Итак, войдите в Панель управления и выберите раздел Мышь :

Изменение скорости прокрутки мыши

Перейдите на вкладку Колесико .

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

Изменение скорости прокрутки тачпада

Для изменения параметров тачпада в системе обязательно должен быть установлен драйвер устройства. Его всегда можно найти на сайте производителя ноутбука . Также, спешим заметить, что Windows 8.1 способна успешно находить и устанавливать драйверы популярных устройств самостоятельно через Интернет. И тачпад — не исключение. На картинках ниже мы показываем, как настроить сенсорную панель от производителя Synaptics, которым комплектуется наш ноутбук HP. Всё, что мы сделали — это установили лицензионную Windows 8.1 и подключились к wifi-роутеру. А через несколько минут нужный touchpad driver был скачан и установлен вместе с драйверами других устройств и обновлениями Windows.

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

Перейдите на вкладку Параметры устройства .

Выделите в списке ваше устройство.

Нажмите кнопку Параметры :

В окне настроек сенсорного устройства перейдите в раздел Прокрутка .

Выберите нужную скорость (в нашем случае её нужно было уменьшить).

Нажмите Применить для сохранения изменений:

Я изменил скорость прокрутки. Почему она не меняется?

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

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

Нажмите кнопку Меню .

Выберите Дополнительные инструменты .

Кликните на Расширения :

Найдите в списке нужное расширение и нажмите на ссылку Параметры под ним:

Если говорить конкретно о расширении SmoothScroll, то для изменения скорости прокрутки веб-страниц вам нужно задать нужное значение в поле Step size и нажать кнопку Save Settings внизу страницы:

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

Настройка скорости движения курсора является общей и для тачпада, и для внешнего манипулятора.

Перейдите на вкладку Параметры указателя .

Выберите комфортную скорость с помощью регулятора.