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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Перевод: Влад Мержевич

Вернёмся назад, когда вы могли настроить скроллбары в IE (5.5) с помощью нестандартных свойств типа scrollbar-base-color , которые применялись к элементам с полосами прокрутки (вроде body ), и делать потрясные штуки . IE теперь не тот.

В наши дни пользовательские скроллбары вернулись, но теперь наступило время WebKit. Это несколько лучше, поскольку свойства содержат вендорный префикс (например ::-webkit-scrollbar ) и используют «Shadow DOM ». Всё это работает уже несколько лет. Дэвид Хаятт в начале 2009 года показал в своём блоге пример страницы со всевозможными полосами прокрутки , о которых вы могли только мечтать.

Необходимое

Разные части

Вот псевдоэлементы, отвечающие за разные части полос прокрутки.

::-webkit-scrollbar { /* 1 - скроллбар */ } ::-webkit-scrollbar-button { /* 2 - кнопка */ } ::-webkit-scrollbar-track { /* 3 - трек */ } ::-webkit-scrollbar-track-piece { /* 4 - видимая часть трека */ } ::-webkit-scrollbar-thumb { /* 5 - ползунок */ } ::-webkit-scrollbar-corner { /* 6 - уголок */ } ::-webkit-resizer { /* 7 - изменение размеров */ }

Различные состояния

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

:horizontal:vertical:decrement:increment:start:end:double-button:single-button:no-button:corner-present:window-inactive

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

:horizontal — применяется к любому скроллбару, который имеет горизонтальную ориентацию.

:vertical — применяется к любому скроллбару, который имеет вертикальную ориентацию.

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

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

:start — применяется к кнопкам и к видимой части трека, сообщает, что объект находится перед ползунком.

:end — применяется к кнопкам и к видимой части трека, сообщает, что объект находится после ползунка.

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

:single-button — применяется к кнопкам и к видимой части трека, используется для определения того, что кнопка в конце скроллбара единственная. Для видимой части трека сообщает, что он примыкает к этой единственной кнопке.

:no-button — применяется к видимой части трека, сообщает, что видимая часть трека приближается к краю скроллбара, другими словами, нет кнопки в конце трека.

:corner-present — применяется ко всем элементам скроллбара и сообщает, что имеется уголок.

:window-inactive — применяется ко всем элементам скроллбара и сообщает, что окно со скроллбаром в данный момент активно. В последних версиях этот псевдокласс хорошо сочетается с::selection. Мы планируем расширить его работу для любого контента и предложить в качестве нового стандартного псевдокласса.

Теперь всё вместе

Эти псевдоэлементы и псевдоклассы работают совместно. Вот несколько случайных примеров.

::-webkit-scrollbar-track-piece:start { /* Выделение верхней половины (или левой половины) трека */ } ::-webkit-scrollbar-thumb:window-inactive { /* Выделение ползунка, когда окно браузера не активно */ } ::-webkit-scrollbar-button:horizontal:decrement:hover { /* Выделение нижней или левой кнопки, когда на них наведён курсор мыши */ }

Очень простой пример

Чтобы сделать действительно простой пользовательский скроллбар мы добавим это.

::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; } ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }

И получим следующий результат на простом