Как создать стиль прокрутки на CSS и JQuery - Форум

Новые сообщения
Участники
Правила форума
Поиск
RSS

Страница 1 из 1
1

Как создать стиль прокрутки на CSS и JQuery (Стилизация пользовательского скроллбара с помощью CSS)

Как создать стиль прокрутки на CSS и JQuery

Kosten

Воскресенье, 01 Июля 2018, 21:46 | Сообщение 1

Администраторы

Сообщений:44490

Награды: 70

« 557 »

Здесь узнаем, как настраивать полосы прокрутки с помощью CSS3. Сегодня более 55% пользователей используют Chrome + Safari в качестве своего веб браузера. Общим в этом браузере является то, что обе поддерживаются платформой Webkit. Настройка полосы прокрутки очень проста с помощью CSS3, но пользовательские полосы прокрутки поддерживаются браузерами Webkit. Не беспокойтесь, поскольку мы знаем, что более 55% рынка браузеров покрывается браузером на основе webkit, например, Chrome и Safari, что тоже замечательно.

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

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

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

Итак, давайте перейдем к кодированию и выполним стиль прокрутки.

Свойства CSS создаются для браузеров на основе webkit, и поэтому они включают Хром для основного монитора на компьютерные и безусловно под мобильные гаджеты, Apple Safari, Flock, OmniWeb Web браузеры. Даже если вы разрабатываете только для них, я имею в виду, что вам не нужно учиться и реализовывать JQuery, то можете охватить 72% веб пользователей.

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

Стиль прокрутки:

Использование псевдоязычных свойств CSS для настройки прокрутки браузера -webkit:

Еще в эпоху IE IE5.5 стал первым браузером, поддерживающим базовый стиль для полос прокрутки. Однако он был ограничен только цветами. Используя scrollbar-face-color свойство, вы можете изменить цвет своего дисплея. Хотя это не создавало бы большой разницы, оно все же лучше, чем полоса прокрутки браузера по умолчанию. Поскольку это свойство по-прежнему поддерживается в Internet Explorer, у вас есть хитроумный трюк для ваших традиционных пользователей IE.

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

1. Это свойство ::webkit-scrollbar позволит вам настроить полосу прокрутки по умолчанию по ширине и цвету. Когда этот псевдоэлемент присутствует, WebKit отключит встроенный рендеринг полосы прокрутки и просто использует информацию, представленную в CSS. Обратите внимание, что это выберет все полосы прокрутки, присутствующие на странице. Если вы хотите настроить полосы прокрутки для определенного элемента, вам необходимо применить это псевдо-свойство к определенному элементу, который вы хотите создать.

Код

::-webkit-scrollbar {
    width: 9px;
    background-color: #f3f0f0;
}

/* For specific scrollbar */
.mybox::-webkit-scrollbar {
    width: 12px;
    background-color: #3e3c3c;
}

2. ::-webkit-scrollbar-thumb - Большой палец полосы прокрутки - это тот, который вы удерживаете, и прокручивайте страницу. Он может иметь сплошной цвет или градиент в качестве фона.

Код

::-webkit-scrollbar-thumb {
width: 9px;
background-image: -webkit-linear-gradient(#f7f3f3, #7f7d7d);
}

3. ::-webkit-scrollbar-track - Он позволяет настроить дорожку полосы прокрутки. С точки зрения непрофессионалов, трек полосы прокрутки - это путь движения большого пальца прокрутки.

Код

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border: 1px solid black;
    background-color: #f5efef;
}

4. ::-webkit-scrollbar-button - Разработчики CSS3 не упустили маленьких кнопок в конце полосы прокрутки. Вы также можете настроить их и почему бы и нет, они также важны и полезно, когда страница длинна, и поэтому полоса прокрутки слишком мала, чтобы прокручивать. Это свойство будет создавать верхний и нижний углы или влево и вправо для горизонтальных полос прокрутки.

Код

::-webkit-scrollbar-button {
background-color: #711f1f;
}

5. ::-webkit-scrollbar-corner - В не в последнюю очередь, CSS дает вам возможность прекрасно справиться с ситуацией, когда появляются полосы прокрутки и встречаются на углу.

Код

::-webkit-scrollbar-corner {
background-color: #9c9797;
}

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

HTML

Код

CSS

Код

header
{
    font-family: 'Lobster', cursive;
    text-align: center;
    font-size: 25px;
}

#info
{
    font-size: 18px;
    color: #555;
    text-align: center;
    margin-bottom: 25px;
}

a{
    color: #074E8C;
}

.scrollbar
{
    margin-left: 30px;
    float: left;
    height: 300px;
    width: 65px;
    background: #F5F5F5;
    overflow-y: scroll;
    margin-bottom: 25px;
}

.force-overflow
{
    min-height: 450px;
}

#wrapper
{
    text-align: center;
    width: 500px;
    margin: auto;
}

/*
*  STYLE 1
*/

#style-1::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

/*
*  STYLE 2
*/

#style-2::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #D62929;
}

/*
*  STYLE 3
*/

#style-3::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar
{
    width: 6px;
    background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar-thumb
{
    background-color: #000000;
}

/*
*  STYLE 4
*/

#style-4::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

#style-4::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-4::-webkit-scrollbar-thumb
{
    background-color: #000000;
    border: 2px solid #555555;
}

/*
*  STYLE 5
*/

#style-5::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

#style-5::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-5::-webkit-scrollbar-thumb
{
    background-color: #0ae;

    background-image: -webkit-gradient(linear, 0 0, 0 100%,
                    color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.5, transparent), to(transparent));
}

/*
*  STYLE 6
*/

#style-6::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

#style-6::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-6::-webkit-scrollbar-thumb
{
    background-color: #F90;
    background-image: -webkit-linear-gradient(45deg,
                    rgba(255, 255, 255, .2) 25%,
                    transparent 25%,
                    transparent 50%,
                    rgba(255, 255, 255, .2) 50%,
                    rgba(255, 255, 255, .2) 75%,
                    transparent 75%,
                    transparent)
}

/*
*  STYLE 7
*/

#style-7::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

#style-7::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-7::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    background-image: -webkit-gradient(linear,
            left bottom,
            left top,
            color-stop(0.44, rgb(122,153,217)),
            color-stop(0.72, rgb(73,125,189)),
            color-stop(0.86, rgb(28,58,148)));
}

/*
*  STYLE 8
*/

#style-8::-webkit-scrollbar-track
{
    border: 1px solid black;
    background-color: #F5F5F5;
}

#style-8::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-8::-webkit-scrollbar-thumb
{
    background-color: #000000;
}

/*
*  STYLE 9
*/

#style-9::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

#style-9::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-9::-webkit-scrollbar-thumb
{
    background-color: #F90;
    background-image: -webkit-linear-gradient(90deg,
                    rgba(255, 255, 255, .2) 25%,
                    transparent 25%,
                    transparent 50%,
                    rgba(255, 255, 255, .2) 50%,
                    rgba(255, 255, 255, .2) 75%,
                    transparent 75%,
                    transparent)
}

/*
*  STYLE 10
*/

#style-10::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

#style-10::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-10::-webkit-scrollbar-thumb
{
    background-color: #AAA;
    border-radius: 10px;
    background-image: -webkit-linear-gradient(90deg,
                    rgba(0, 0, 0, .2) 25%,
                    transparent 25%,
                    transparent 50%,
                    rgba(0, 0, 0, .2) 50%,
                    rgba(0, 0, 0, .2) 75%,
                    transparent 75%,
                    transparent)
}

/*
*  STYLE 11
*/

#style-11::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

#style-11::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-11::-webkit-scrollbar-thumb
{
    background-color: #3366FF;
    border-radius: 10px;
    background-image: -webkit-linear-gradient(0deg,
                    rgba(255, 255, 255, 0.5) 25%,
                    transparent 25%,
                    transparent 50%,
                    rgba(255, 255, 255, 0.5) 50%,
                    rgba(255, 255, 255, 0.5) 75%,
                    transparent 75%,
                    transparent)
}

/*
*  STYLE 12
*/

#style-12::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
    border-radius: 10px;
    background-color: #444444;
}

#style-12::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

#style-12::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    background-color: #D62929;
    background-image: -webkit-linear-gradient(90deg,
                    transparent,
                    rgba(0, 0, 0, 0.4) 50%,
                    transparent,
                    transparent)
}

/*
*  STYLE 13
*/

#style-13::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
    border-radius: 10px;
    background-color: #CCCCCC;
}

#style-13::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

#style-13::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    background-color: #D62929;
    background-image: -webkit-linear-gradient(90deg,
                    transparent,
                    rgba(0, 0, 0, 0.4) 50%,
                    transparent,
                    transparent)
}

/*
*  STYLE 14
*/

#style-14::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
    background-color: #CCCCCC;
}

#style-14::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-14::-webkit-scrollbar-thumb
{
    background-color: #FFF;
    background-image: -webkit-linear-gradient(90deg,
                    rgba(0, 0, 0, 1) 0%,
                    rgba(0, 0, 0, 1) 25%,
                    transparent 100%,
                    rgba(0, 0, 0, 1) 75%,
                    transparent)
}

/*
*  STYLE 15
*/

#style-15::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

#style-15::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-15::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    background-color: #FFF;
    background-image: -webkit-gradient(linear,
            40% 0%,
            75% 84%,
            from(#4D9C41),
            to(#19911D),
            color-stop(.6,#54DE5D))
}

/*
*  STYLE 16
*/

#style-16::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

#style-16::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-16::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    background-color: #FFF;
    background-image: -webkit-linear-gradient(top,
                    #e4f5fc 0%,
                    #bfe8f9 50%,
                    #9fd8ef 51%,
                    #2ab0ed 100%);
}

Код

$(document).ready(function () {
          if (!$.browser.webkit) {
              $('.wrapper').html('<p>Sorry! Non webkit users. :(</p>');
          }
      });

Демонстрация

Прикрепления: 4207363.jpg (38.4 Kb)

Страна: (RU)

Как создать стиль прокрутки на CSS и JQuery (Стилизация пользовательского скроллбара с помощью CSS)

Страница 1 из 1
1