Вид полосы прокрутки css: Как сделать полосу прокрутки

Содержание

Как сделать полосу прокрутки

Узнайте, как создать пользовательскую полосу прокрутки с помощью CSS.

Настраиваемые полосы прокрутки

Настраиваемые полосы прокрутки не поддерживаются в Firefox или IE/Edge.

Создание пользовательских полос прокрутки

Браузеры WebKit, такие как Chrome, Safari и Opera, поддерживают нестандартные ::-webkit-scrollbar псевдо-элементы, что позволяет нам изменять внешний вид полосы прокрутки браузера.

В следующем примере создается тонкая полоса прокрутки (10px Wide), которая имеет серый цвет дорожки/полосы и темно-серый (#888) дескриптор:

Пример

/* width */
::-webkit-scrollbar {
width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}

В этом примере создается полоса прокрутки с тенью поля:

Пример

/* width */
::-webkit-scrollbar {
width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}

Селекторы полосы прокрутки

Для браузеров WebKit можно использовать следующие псевдо-элементы для настройки полосы прокрутки браузера:

::-webkit-scrollbar полоса прокрутки
::-webkit-scrollbar-button кнопки на полосе прокрутки (стрелки, указывающие вверх и вниз).
::-webkit-scrollbar-thumb Перетаскивание маркера прокрутки.
::-webkit-scrollbar-track дорожка (индикатор выполнения) полосы прокрутки.
::-webkit-scrollbar-track-piece дорожка (индикатор выполнения) не покрывается ручкой.
::-webkit-scrollbar-corner нижний угол полосы прокрутки, где встречаются как горизонтальные, так и veritcal полосы прокрутки.
::-webkit-resizer Перетаскивание маркера изменения размера, который отображается в нижнем углу некоторых элементов.

Полоса прокрутки. Учебник CSS.

Глава 14

Коротенькая и совсем несложная глава про цвет полосы прокрутки.

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

В качестве элементов могут выступать любые блоки, в которых гипотетически может появляться полоса прокрутки <div>, <textarea>, <iframe> и т. д.. в том числе и сама страница — тег <body>.

В таблице ниже перечислены все свойства CSS из семейства scrollbar, а также показан результат применения этих свойств.

Ну вот Вам ещё и рисунок для наглядности:

Возможные значения свойств из семейства scrollbar:

#ff0000 — Шестнадцатеричное значение цвета RGB.
red — Именное значение цвета.
RGB(255, 0, 0) — Значение цвета RGB.
inherit — применяется значение родительского элемента.(по умолчанию)

Пример:

Файл primer3.css
body{
background-color: #fff8dc;
scrollbar-3dlight-color: #ffebcd;
scrollbar-arrow-color: #ffffff;
scrollbar-base-color: #ffebcd;
scrollbar-darkshadow-color: #f5f5dc;
scrollbar-face-color: #b8860b;
scrollbar-highlight-color: #f5f5dc;
scrollbar-shadow-color: #f5f5dc;
scrollbar-track-color: #f5f5dc;
}
div{
padding: 20px;
overflow: auto;
width: 200px;
height: 100px;
border: solid 2px #deb887;
background-color: #ffffff;
}

Файл index. html
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»>
<html>
<head>
<title>Полоса прокрутки</title>
<link rel=»stylesheet» href=»primer3.css» type=»text/css»>
</head>
<body>
<div>
<h4 align=»center»>Диктант</h4>
На террасе, близ конопляника, небезызвестная вдова Агриппина Саввична, потчевала, отставного коллежского асессора Аполлона Карповича, моллюсками, под аккомпанемент виолончели.
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

Хочу отметить, что свойства CSS из семейства

scrollbar являются расширением спецификации CSS2, введенным компаний Microsoft, и реализованным в браузерах Internet Explorer начиная с версии IE 5.

5, соответственно другие браузеры, на тот момент, полностью игнорировали данное свойство. Но прошло время и многие браузеры стали подстраиваться под это дополнение к спецификации от Microsoft.

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

<body> или не понимают некоторые отдельные свойства скроллбара.

Ниже приведу несколько советов, которые возможно помогут решить данную проблему в тех или иных браузерах. Употребляю слово «возможно» потому что очень трудно отследить в динамике за всеми изменениями разных браузеров. Мир не стоит на месте каждый день, там или здесь, что-то меняется! Жаль вот только что кроссбраузерность всегда остаётся головной болью!

Но что то я заговорился.. Итак, ряд «таблеток»:

1. По возможности используйте вот такой заголовок <!DOCTYPE>:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.

01 Transitional//EN»>

2. Указывайте свойства скроллбара не только для тега <body> но и для тега <html>

Вот так:

html,body{
scrollbar-3dlight-color: #ffebcd;
scrollbar-arrow-color: #ffffff;
}

3. Попробуйте, если это более менее рационально для Вашего сайта, внедрять стили полосы прокрутки используя атрибут style, а не одноименный тег в «голове» документа или внешний css файл

Вот так:

<div>блок</div>

Возможно, данные рекомендации сработают в некоторых браузерах, в любом случае в IE (начиная с версии 5.5) всё будет работать корректно, а раз хоть где-то работает это уже хорошо!

Так как scrollbar является одним из важных элементов интерфейса, постарайтесь не вести пользователя в заблуждение, используя совсем уж нестандартный дизайн полосы прокрутки.
Если Вам прямо таки совсем необходим нестандартный скроллбар, не только нестандартный цвет, он и нестандартная форма, да и еще и работающий во всех браузерах используйте скрипты, но не забывайте про первый совет!!
В браузере внешний вид полосы прокрутки черпается из настроек Windows и например у меня, она имеет вот такой вид:

Но как только Вы примените к полосе прокрутки любое свойство из семейства scrollbar, связь с настройками Windows потеряется, точнее станет «по умолчанию» и полоса приобретёт вот такой вид:

Изменяем вид полосы прокрутки в браузере

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

Поэтому если вы решили сделать цвет прокрутки нестандартный, то убедитесь что он подходит по цветовой гамме вашему сайту.

Интересный эффект о котором я писал раньше: Перетаскивание блоков используя jQuery.

В данной статье мы рассмотрим 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

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

Вывод

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

Успехов!

Как настроить полосу прокрутки браузера с помощью (WebKit) CSS

Полоса прокрутки в браузере, вероятно, единственная вещь в окне, которая не соответствует стилю вашего сайта, если вы ищете, как ее настроить, верно?

Однако настройка полосы прокрутки — задача не из легких. Меньше, не только с CSS, но и не невозможно. Google Chrome представил -webkit-scrollbar Селектор в CSS, который позволяет вам с чистой CSS настроить полосу прокрутки, как вы хотите.

Браузеры, основанные на webkit, позволяют использовать следующие селекторы для применения стиля к полосе прокрутки:

::-webkit-scrollbar {
/*Sel 1 -Properties*/
}
::-webkit-scrollbar-button{
/*Sel 2 -Properties*/
}
::-webkit-scrollbar-track{
/*Sel 3 -Properties*/
}
::-webkit-scrollbar-track-piece{
/*Sel 4 -Properties*/
}
::-webkit-scrollbar-thumb{
/*Sel 5 -Properties*/
}
::-webkit-scrollbar-corner{
/*Sel 6 -Properties*/
}
::-webkit-resizer{
/*Sel 7 -Properties*/
}

Смотрите каждый селектор как часть прокручиваемого div:

И каждый селектор имеет разные состояния (псевдоселекторы), как показано в следующем примере:

:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactive
/**
* when the track piece is on the start
*/
::-webkit-scrollbar-track-piece:start {
/* Select the top half (or left half) or scrollbar track individually */
}
/* When the thumb is in the vertical orientation*/
::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: black;
}

Каждое состояние описано в следующей таблице:

`:horizontal`	Горизонтальный псевдокласс применяется ко всем элементам полосы прокрутки, имеющим горизонтальную ориентацию.
`:vertical`	Вертикальный псевдокласс применяется к любым частям полосы прокрутки, которые имеют вертикальную ориентацию.
`:decrement`	Псевдокласс декремента применяется к кнопкам и фрагментам дорожек. Он указывает, будет ли кнопка или элемент дорожки уменьшать положение вида при использовании (например, вверх по вертикальной полосе прокрутки, влево по горизонтальной полосе прокрутки).
`:increment`	Псевдокласс приращения применяется к кнопкам и фрагментам дорожки. Он указывает, будет ли кнопка или элемент дорожки увеличивать позицию вида при использовании (например, вниз на вертикальной полосе прокрутки, прямо на горизонтальной полосе прокрутки).
`:start`	Начальный псевдокласс применяется к кнопкам и фрагментам дорожки. Указывает, находится ли объект перед большим пальцем.
`:end`	Конечный псевдокласс применяется к кнопкам и фрагментам трека. Указывает, находится ли объект после большого пальца.
`:double-button`	Псевдокласс с двумя кнопками применяется к кнопкам и дорожкам. Он используется для определения того, является ли кнопка частью пары кнопок, которые находятся на одном конце полосы прокрутки. Для фрагментов дорожки указывает, упирается ли элемент дорожки в пару кнопок.
`:single-button`	Псевдокласс с одной кнопкой применяется к кнопкам и фрагментам дорожек. Он используется для определения того, находится ли кнопка в конце полосы прокрутки. Для фрагментов дорожек указывает, примыкает ли фрагмент дорожки к одной кнопке.
`:no-button`	Применяется к фрагментам дорожки и указывает, проходит ли фрагмент дорожки к краю полосы прокрутки, т. Е. На этом конце дорожки нет кнопки.
`:corner-present`	Применяется ко всем элементам полосы прокрутки и указывает, присутствует ли угол полосы прокрутки.
`:window-inactive`	Применяется ко всем частям полосы прокрутки и указывает, активно ли в данный момент окно, содержащее полосу прокрутки. (В последние ночи этот псевдокласс теперь применяется и к :: selection. Мы планируем расширить его для работы с любым контентом и предложить его в качестве нового стандартного псевдокласса.

Поиграйте со следующей скрипкой:

Или посмотрите более сложный пример на следующей странице:

Как видите, эта функция очень перспективна и интересна. Попробуйте объединить множество селекторов и создайте собственную классную полосу прокрутки в Google Chrome!

Кросс-браузер

До даты только Google Chrome поддерживает стили с использованием CSS. Однако это еще не конец истории, так как вы все еще можете выполнить настройку полосы прокрутки с помощью javascript, используя плагин в каждом браузере.

Стиль полосы прокрутки элемента управления CSS


/ * Являясь лидером ИТ-индустрии, мы должны придерживаться стиля каждого элемента на странице, и мы не будем игнорировать полосу прокрутки. 
Позвольте мне рассказать вам, как управлять стилем полосы прокрутки с помощью CSS. Код выглядит следующим образом: * /
1  /*Определите дорожку полосы прокрутки*/
 2     #style-2::-webkit-scrollbar-track
 3     {
 4         background-color: #F5F5F5;
 5         -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);
 6     }
 7     /*Определите высоту, ширину и фон полосы прокрутки*/
 8     #style-2::-webkit-scrollbar
 9     {
10         width: 10px;
11         background-color: rgba(0, 0, 0, 0.34);
12     }
13     /*Определить полосу прокрутки*/
14     #style-2::-webkit-scrollbar-thumb
15     {
16         background-color: #8b8b8b;
17         border-radius: 10px;
18     }

* Чтобы обеспечить прокрутку содержимого в одном блоке, необходимо выполнить три условия:

1. Для div должна быть установлена фиксированная высота, и нельзя использовать эластичные значения, такие как процент или авто.

2. Высота содержимого должна превышать его собственную высоту.

3. Необходимо добавить атрибут «переполнение: авто».

* Скрыть полосу прокрутки:

1. Удалите горизонтальную полосу прокрутки:

<body>

2. Уберите вертикальную полосу прокрутки:

<body>

3. Скрыть горизонтальные и отобразить вертикальные полосы прокрутки:

<body>

4. Скрыть все полосы прокрутки:

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

заявление:

Нет горизонтальной полосы прокрутки:
<div>test</div>

Нет вертикальной полосы прокрутки
<div>test</div>

Нет полосы прокрутки
<div style = «overflow-x: hidden; overflow-y: hidden» или style = «overflow: hidden»> test </div>

Показывать полосу прокрутки автоматически
<div style=»height:100px;width:100px;overflow:auto;»>test</div>

Цвет полосы прокрутки задайте сами, код такой:

 1 Body {
 2 scrollbar-arrow-color: #f4ae21; /*Цвет треугольной стрелки*/
 3 scrollbar-face-color: #333; /*Цвет трехмерной полосы прокрутки*/
 4 scrollbar-3dlight-color: #666; /*Яркая сторона трехмерной полосы прокруткицвет*/
 7 scrollbar-highlight-color: #666; /*Пустая часть полосы прокруткицвет*/
10 scrollbar-shadow-color: #999; /*Цвет тени трехмерной полосы прокруткицвет*/
13 scrollbar-darkshadow-color: #666; /*Трехмерная полоса прокрутки сильной тениЦвет тени*/
16 scrollbar-track-color: #666; /*Цвет фона трехмерной полосы прокрутки*/
18 scrollbar-base-color:#f8f8f8; /*Основной цвет полосы прокрутки*/
19 Cursor:url(mouse. cur); /*Настроить персональную мышь*/
20 }

Вышеуказанные 2 элемента применимы к <body>, <div>, <textarea>, <iframe>

Прикрепил:

Объясните роль атрибутов переполнения и различных значений:

overflow: visible; не вырезать содержимое и не добавлять полосы прокрутки. По умолчанию. При использовании этого значения, независимо от того, какие значения «ширина» и «высота» установлены, содержимое будет принудительно отображаться независимо от того, выходит ли оно за пределы диапазона. К

overflow: auto; вырезать содержимое и при необходимости добавлять полосы прокрутки.

overflow: hidden; содержимое, превышающее высоту объекта, не отображается.

overflow: scroll; всегда отображать вертикальную полосу прокрутки.

overflow Настройка при переполнении содержимого в горизонтальном и вертикальном направлениях

overflow-x Настройка при переполнении содержимого в горизонтальном направлении

overflow-y Настройка при переполнении содержимого в вертикальном направлении

Вышеуказанные настройки атрибутов: видимые, прокрутка, скрытые, авто

Скрытый эффект противоположен видимому. Все, что выходит за рамки «ширины» и «высоты»Контент не будет виден. К

прокрутка Независимо от того, превышает ли содержимое диапазон, будет отображаться полоса прокрутки.

Перепечатано по адресу: https://www.cnblogs.com/kingchan/p/5987549.html

overflow-block — CSS | MDN

CSS свойство overflow-block устанавливает, что будет отображаться, когда содержимое переполняет начальные и конечные края блока. Это может быть ничего, полоса прокрутки или содержимое переполнения.

Свойство overflow-block отображается на overflow-y (en-US) или overflow-x (en-US) в зависимости от режима записи документа.


overflow-block: visible;
overflow-block: hidden;
overflow-block: scroll;
overflow-block: auto;


overflow-block: inherit;
overflow-block: initial;
overflow-block: unset;

Свойство overflow-block указывается как одно ключевое слово, выбранное из списка значений ниже.

Значения

visible: Содержимое не обрезается и может отображаться за пределами начального и конечного краёв блока отступа.
hidden: При необходимости содержимое обрезается, чтобы соответствовать размеру блока в поле заполнения. Полосы прокрутки отсутствуют.
scroll: При необходимости содержимое обрезается, чтобы поместиться в размер блока в поле заполнения. Браузеры отображают полосы прокрутки вне зависимости от того, вырезано ли содержимое. (Это предотвращает появление или исчезновение полос прокрутки при изменении содержимого.) Принтеры могут по-прежнему печатать переполненное содержимое.
auto: Зависит от пользовательского агента. Если содержимое помещается в поле дополнения, оно выглядит так же, как visible, но всё же устанавливает новый контекст форматирования блока. Настольные браузеры устанавливают полосы прокрутки, если содержимое переполняется.

Формат синтаксиса

HTML

<ul>
  <li><code>overflow-block:hidden</code> — скрывает текст за пределами поля
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li><code>overflow-block:scroll</code> — всегда добавляет полосу прокрутки
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li><code>overflow-block:visible</code> — отображает текст вне поля, если это необходимо
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li><code>overflow-block:auto</code> — в большинстве браузеров, что эквивалентно <code>scroll</code>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>
</ul>

CSS

#div1,
#div2,
#div3,
#div4 {
  border: 1px solid black;
  width:  250px;
  height: 100px;
}

#div1 { overflow-block: hidden; margin-bottom: 12px;}
#div2 { overflow-block: scroll; margin-bottom: 12px;}
#div3 { overflow-block: visible; margin-bottom: 120px;}
#div4 { overflow-block: auto; margin-bottom: 120px;}

Результат

BCD tables only load in the browser

Как скрыть полосы прокрутки при помощи CSS?

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

Убрать полосы прокрутки со страницы при помощи CSS

Метод основан на использовании CSS свойства overflow, которое определяет, как будет отображаться содержимое блочной структуры, если оно (содержимое) превышает размеры родительского элемента.

Из всех возможных значений данного свойства нас интересует значение «hidden»:

которое задает браузеру инструкцию «отобразить поместившийся контент, что не влезло – скрыть»

Применив это свойство к селектору body или html можно добиться исчезновения полос прокрутки.

Рассмотрим пример:

HTML:

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title> Убираем скролл </title>
  </head> 
<body> 
      <div></div>
</body>
</html>

CSS:

Как видим, у нас есть девственно-чистая страница высотой 2800px с полосой вертикального скролла. Теперь добавим в каскадную таблицу стилей строчку:

html { overflow:  hidden; }

и обновим страничку.

Также можно применять свойства overflow-y (overflow-x) для управления отображением не вместившегося контента только по вертикали (горизонтали). Т.е., исходя из рассматриваемого контекста, можно скрыть только вертикальную (горизонтальную) полосу прокрутки.

Важно!!!

CSS не скрывает полосы прокрутки, а всего лишь создает браузеру условия, при которых нет необходимости их выводить. Это значит, что вместе с скролл-барами у вас пропадет и скролл-функция, и «не вмещающийся контент» будет недоступен для просмотра!
Перед использованием данного приема, хорошо подумайте – нужен ли вам он вообще. Ведь маленький недочет и можно потерять полезную информацию из поля зрения.
Наиболее оправданным будет применение overflow: hidden в следующих случаях:
- Вывод маленькой страницы, которая априори поместится полностью на экране (например, страницы ошибки, страницы авторизации и т. д. ).
- Вывод небольших web-форм
- Скрытие полос прокрутки при создании собственного каcтомного скролл-бара.

Послесловие

Чаще всего к этой теме web-мастера приходят тогда, когда яркий авторский дизайн сайта сходит на ноль из-за «приевшегося» стандартного вида системного скролл-бара. Да, бывает и такое. В таком случае, существует несколько вариантов решения проблемы:

Кастомизовать системные полосы прокрутки.
На сегодняшний день более-менее гибкую настройку позволяют выполнять браузеры на базе webkit.

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

Преимущества:

Системный скролл гораздо производительнее JavaScript-симуляторов, реализует все «фишки» операционной системы устройства, сохраняется кросс-платформенность.

Недостатки:

Нет никаких гарантий, что браузеры на других (не webkit) движках смогут осознать всю «тонкость душевной организации» вашего сайта (кастомизация скорее всего не произойдет).

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

Дело в том, что в этом случае JavaScript приходится обрабатывать системные события связанные со скроллом. А интерфейс этих событий значительно отличается для каждого браузера, не говоря уже о разных платформах. Учтите эту информацию при использовании «готовых» j-скроллеров (особенно, когда на странице источника заявляют о полной «кросс» без подтверждения).

Преимущества

Безграничная по глубине кастомизация.

Недостатки

Производительность эмулятора ниже производительности системной прокрутки.
Нет гарантий кросс-браузерности и кросс-платформности.

Тема авторского универсального скролла будет более подробно рассмотрена в отдельной статье. Успешных Вам проектов!!!

Оценок: 17 (средняя 3.5 из 5)

30388 просмотров

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

Свойство переполнения CSS

Пример

Показать различные значения свойств переполнения:

div.ex1 {
переполнение: прокрутка;
}

дел. Ex2 {
переполнение: скрыто;
}

div.ex3 {
переполнение: авто;
}

div.ex4 {
overflow: visible;
}

Попробуй сам »

Определение и использование

Свойство overflow указывает, что должно произойти, если содержимое выходит за пределы поля элемента.

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

Примечание: Свойство overflow работает только для блочных элементов с указанной высотой.

Значение по умолчанию:	видимый
Унаследовано:	нет
Анимируемый:	нет.Прочитать о animatable
Версия:	CSS2
Синтаксис JavaScript:	объект .style.overflow = «scroll» Попытайся

Поддержка браузера

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

Объект
перелив	1. 0	4,0	1,0	1,0	7,0

Примечание. В OS X Lion (на Mac) полосы прокрутки по умолчанию скрыты и отображаются только при использовании (даже если задано «overflow: scroll»).

Синтаксис CSS

Стоимость недвижимости

Значение	Описание	Играй
видимый	Перелив не отсечен.Он отображается вне рамки элемента. Это значение по умолчанию	Играй »
скрыто	Переполнение обрезается, остальное содержимое будет невидимым	Играй »
прокрутка	Переполнение обрезается, но добавляется полоса прокрутки для просмотра остального содержимого	Играй »
авто	Если переполнение ограничено, полоса прокрутки должна быть добавлена для просмотра остального содержимого	Играй »
начальный	Устанавливает для этого свойства значение по умолчанию. Читать про начальные	Играй »
наследовать	Наследует это свойство от своего родительского элемента. Читать о наследовать

Связанные страницы

Учебник

CSS: переполнение CSS

Учебник

CSS: позиционирование CSS

Ссылка на HTML DOM: свойство переполнения

Пользовательские полосы прокрутки · Muffin Man

Прочтение этой статьи займет около 2 минут.

Обычно, когда доходит до замены компонентов собственного пользовательского интерфейса, я категорически против. Но все мы были там, когда клиент настаивал на этом.

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

Ну, пойдем 🙂

Решение CSS, но только для webkit

Полосы прокрутки Webkit могут быть стилизованы с помощью CSS. Это здорово, но все же не кроссбраузерно. Об этом есть отличная статья о трюках CSS.

Вы можете использовать псевдоселекторы, они используются в демонстрации:

  :: - webkit-scrollbar {
  фон: # CCF6ED;
  радиус границы: 4 пикселя;
  высота: 8 пикселей;
  ширина: 8 пикселей;
}

:: - webkit-scrollbar-thumb {
  фон: # 21BB9A;
  радиус границы: 4 пикселя;
}

Проверить демо jsfiddle с зелеными полосами прокрутки только webkit .

Плагин Custom JavaScript, использующий встроенную прокрутку

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

Использование встроенной прокрутки браузера, чтобы она была максимально плавной. Полосы прокрутки настраиваются с помощью CSS.

Посмотрите демо.

Возьмите код на GitHub.

Решение CSS, все браузеры

Идея — показывать полосы прокрутки только при наведении курсора мыши.
Проблема — контент будет уменьшаться на ширину полосы прокрутки при наведении и прыжке.

Мы собираемся использовать быстроту, которую все браузеры имеют полосу прокрутки шириной менее 20 пикселей.В этой демонстрации используются два блока div: внешний, который будет прокручиваться, и содержимое, заключенное во внутренний. Просто поместите overflow: hidden на внешний div и при наведении курсора мыши переключитесь на overflow: scroll Имея внутренний div меньше на 20 пикселей, вы сможете создать достаточно места для полосы прокрутки, и контент не будет прыгать вокруг.

Вам потребуется добавить modernizr или другой способ обнаружения сенсорных устройств. Вот почему мы используем overflow-y: scroll по умолчанию.Прокрутка на сенсорных устройствах уже приятная и плавная.

  .scroll-y {
  ширина: 300 пикселей;
  высота: 300 пикселей;
  переполнение-y: прокрутка; / * чтобы не испортить прокрутку на сенсорных устройствах * /
}

. scroll-y-content {
  отступ: 20 пикселей 0 20 пикселей 20 пикселей;
  ширина: 280 пикселей; / * На 20 пикселей меньше родительской ширины * /
}

/ * класс no-touchevents добавлен modernizr
 * так как мы не хотим применять это на сенсорных устройствах * /
.no-touchevents .scroll-y {
  переполнение-y: скрыто;
}

.no-touchevents .scroll-y: hover {
  переполнение-y: прокрутка;
}

Проверить демо на CodePen (обратите внимание, что демо было обновлено для работы без modernizr).

Скрытая полоса прокрутки на прокручиваемом элементе с помощью CSS

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

Во-первых, если вы хотите скрыть полосу прокрутки и отображать ее при прокрутке пользователем, просто установите overflow: auto. Это самый простой вариант использования.

 перелив: авто;

Теперь давайте посмотрим на все значения переполнения.

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

Вы увидите, что нет значения переполнения, которое скроет полосу прокрутки, но при этом сделает ее прокручиваемой.Использование overflow: hidden отключит прокрутку, а это не то, что нам нужно. Так что нам понадобится другой способ скрыть полосу прокрутки. К сожалению, не существует универсального свойства CSS, которое бы делало что-то вроде этого

 div {
  видимость полосы прокрутки: скрыто; / * <--- Хотелось бы, чтобы у нас был этот !! * /
}

Нам нужно будет реализовать разные свойства CSS для каждого браузера. Для Firefox мы можем установить ширину полосы прокрутки равной нулю.

 ширина полосы прокрутки: нет; / * Firefox * /

Для IE нам нужно использовать свойство префикса -ms для определения стиля полосы прокрутки

 -ms-overflow-style: нет; / * IE 10+ * /

Для Chrome и Safari.Придется использовать селектор полосы прокрутки CSS. Затем примените display: none, чтобы скрыть его.

 :: - webkit-scrollbar {
    дисплей: нет; / * Chrome Safari * /
}

Или вы можете установить его ширину и высоту на 0.

 :: - webkit-scrollbar {
  ширина: 0;
  высота: 0;
}

Реализация

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

 div {
:: - webkit-scrollbar {
    дисплей: нет; / * Chrome Safari * /
}
  ширина полосы прокрутки: нет; /* Fire Fox */
  -ms-overflow-style: нет; / * IE 10+ * /
  переполнение-y: прокрутка;
  переполнение-x: скрыто;
}

Вы можете протестировать его с помощью нашей демонстрации на Codepen

Создание вертикально прокручиваемого div с помощью CSS

< html >

< head >

style < style >

h2 {

цвет: зеленый;

}

дел.прокрутка {

поля: 4 пикселя, 4 пикселя;

отступ: 4 пикселя;

цвет фона: зеленый;

ширина: 500 пикселей;

высота: 110 пикселей;

overflow-x: скрыто;

переполнение: авто;

выравнивание текста: выравнивание;

}

стиль >

головка >

< корпус > 9000

< центр >

< h2 > GeeksforGeeks h2 >

< div class = div class = "scroll" > Это хорошая платформа для изучения программирования.

Это образовательный веб-сайт. Подготовьтесь к набору персонала

продуктовых компаний, таких как Microsoft, Amazon, Adobe и т. Д., С

бесплатным онлайн-курсом подготовки к трудоустройству. Курс направлен на

на различные вопросы MCQ и кодирования, которые, вероятно, будут заданы в ходе собеседований

и сделают ваш предстоящий сезон трудоустройства эффективным и

успешным.Кроме того, любые гики могут помочь другим гикам, написав

статей на GeeksforGeeks, публикации статей следуют за несколькими шагами

, которые являются статьями, требующими небольших изменений / улучшений

опубликовано первым. Чтобы быстро просмотреть свои статьи

, обратитесь к существующим статьям, их стилю форматирования, стилю кодирования

и постарайтесь сделать вас ближе к ним. Если вы

новичок, вы можете обратиться к Руководству по написанию статьи

div >

center >

body >

html >

`Как скрыть полосу прокрутки в CSS`

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

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

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

`Как скрыть полосу прокрутки в CSS (но разрешить прокрутку)`

Увы, не существует одного специального правила CSS, чтобы скрыть полосу прокрутки при сохранении возможности прокрутки страницы / элемента вниз.Однако это возможно с помощью нескольких правил CSS для конкретного браузера. Чтобы скрыть полосу прокрутки и сохранить функциональность прокрутки, примените следующий CSS к телу (для всей страницы) или к конкретному элементу.

  
 / * скрыть полосу прокрутки, но разрешить прокрутку * / 
 element {
 -ms-overflow-style: none; / * для Internet Explorer, Edge * / 
 ширина полосы прокрутки: нет; / * для Firefox * / 
 overflow-y: scroll; 
}  element :: - webkit-scrollbar {
 display: none; / * для Chrome, Safari и Opera * / 
}

...где элемент - это селектор, на который вы хотите настроить таргетинг. Вот как выглядит этот код при применении ко всей странице:

См. Перо. Скрыть полосу прокрутки в CSS, но разрешить прокрутку (тело) Кристины Перриконе (@hubspot) на CodePen.

А вот тот же код, примененный к элементу

 :
 См. Ручка «Скрыть полосу прокрутки в CSS, но разрешить прокрутку» (div) от Кристины Перриконе (@hubspot) на CodePen.
 Обычно полоса прокрутки появляется в обоих этих случаях, но наши правила не допускают, чтобы это происходило в популярных веб-браузерах.
 Как скрыть полосу прокрутки в CSS (и предотвратить прокрутку) 
 Чтобы скрыть полосу прокрутки и отключить прокрутку, мы можем использовать свойство переполнения CSS. Это свойство определяет, что делать с содержимым, выходящим за пределы его контейнера.
 Чтобы предотвратить прокрутку с этим свойством, просто примените правило  overflow: hidden  к телу (для всей страницы) или элементу контейнера. Это скрывает все содержимое за границей элемента. В качестве альтернативы используйте  overflow: visible  для отображения содержимого, выходящего за границы контейнера.
 См. Ручка «Скрыть полосу прокрутки в CSS» и «Предотвратить прокрутку (переполнение: скрыто)» Кристины Перриконе (@hubspot) на CodePen.
 Отключает как вертикальную, так и горизонтальную прокрутку. Как мы увидим далее, вы также можете отключить только горизонтальную прокрутку или только вертикальную прокрутку.
 Как скрыть вертикальную полосу прокрутки в CSS 
 Чтобы скрыть вертикальную полосу прокрутки и предотвратить вертикальную прокрутку, используйте  overflow-y: hidden , например:
 См. Ручка «Скрыть полосу прокрутки в CSS» и «Предотвратить прокрутку (overflow-y: hidden)» Кристины Перриконе (@hubspot) на CodePen.
 Как скрыть горизонтальную полосу прокрутки в CSS 
 Поскольку горизонтальная прокрутка - плохая идея, это правило может пригодиться. Чтобы скрыть горизонтальную полосу прокрутки и предотвратить горизонтальную прокрутку, используйте  overflow-x: hidden :
 См. Ручка «Скрыть полосу прокрутки в CSS» и «Предотвратить прокрутку (overflow-x: hidden)» Кристины Перриконе (@hubspot) на CodePen.
 Как скрыть полосу прокрутки до необходимости 
 В некоторых случаях скрытие полосы прокрутки может помочь в дизайне.Но в других случаях удаление этой части страницы может на самом деле навредить пользователю.
 Большинство посетителей связывают прокрутку с видимой полосой прокрутки. Итак, если применить этот метод ко всей странице, некоторым это может показаться странным. Кроме того, полосы прокрутки сообщают нам, какую часть страницы нам осталось просмотреть (если не реализована бесконечная прокрутка). Если у вас нет другого визуального индикатора того, что осталось увидеть больше контента, отсутствие полосы прокрутки может оттолкнуть.
 Пользовательское тестирование может прояснить, как отсутствующая полоса прокрутки влияет на пользовательский интерфейс вашего сайта, но во многих случаях хорошим компромиссом является скрытие полосы прокрутки до тех пор, пока пользователь не начнет прокрутку.Чтобы включить это в CSS, используйте правило  overflow: auto .
 См. Перо Скрыть полосу прокрутки до необходимости Кристина Перриконе (@hubspot) на CodePen.
 Скрыть полосу прокрутки с помощью CSS 
 Создаете ли вы страницу с использованием чистого CSS или такой фреймворк, как Bootstrap, достаточно всего нескольких правил, чтобы скрыть полосу прокрутки с вашей страницы.
 Однако имейте в виду, что то, что вы можете, не означает, что вы должны это делать. Для многих пользователей полоса прокрутки является удобной визуальной подсказкой, поддерживающей навигацию.Если вы собираетесь удалить его, обязательно сделайте это намеренно и таким образом, чтобы облегчить ваш дизайн.
 Настройка полос прокрутки с помощью CSS3 
 Введение 
 В этой статье мы узнаем, как настроить полосы прокрутки с помощью CSS3. Сегодня более 55% людей используют Chrome + Safari в качестве веб-браузера. Общим для этих браузеров является то, что оба они поддерживаются платформой Webkit. Настроить полосу прокрутки очень легко с помощью CSS3, но настраиваемые полосы прокрутки поддерживаются браузерами Webkit.
 Не волнуйтесь, поскольку, как мы знаем, более 55% рынка браузеров покрывается браузерами на базе платформы Webkit (такими как Chrome и Safari), что тоже здорово.
 Перед началом мы увидим структуру полосы прокрутки
 Давайте начнем
 Следующий документ создаст HTML-документ:
 Пример 3

 
 Таблица стилей CSS 
 Сначала мы устанавливаем.ширина полосы прокрутки (класс), высота и цвет фона. Мы устанавливаем overflow-y: scroll для получения вертикальной полосы прокрутки. Затем установите высоту div .content больше, чем .scrollbar, чтобы появилась полоса прокрутки (потому что мы использовали свойство overflow-y для прокрутки в классе .scrollbar).
. Полоса прокрутки {
 ширина: 150 пикселей;
 высота: 300 пикселей;
 цвет фона: светло-серый;
 margin-top: 40px;
 левое поле: 40 пикселей;
 переполнение-y: прокрутка;
 поплавок: левый;
}
. содержание {
 высота: 450 пикселей;
} 
 Затем мы используем псевдоэлемент полосы прокрутки для создания настраиваемой полосы прокрутки. Когда мы используем псевдоэлемент полосы прокрутки, он отключает свою полосу прокрутки по умолчанию, и отображается полоса прокрутки с шириной 16 пикселей и цветом фона: #cccccc.
 # ex3 :: - полоса прокрутки webkit {
 width: 16px;
 цвет фона: #cccccc;
}
 Предварительный просмотр
 Как мы знаем, полоса прокрутки содержит дорожку, кнопку и большой палец.
 На следующем этапе мы придадим большому пальцу стильный вид. Мы используем псевдоэлемент (другими словами, scrollbar-thumb) с префиксом «webkit». Установите цвет фона и радиус границы для ползунка прокрутки. Также мы меняем цвет при наведении курсора мыши и активации (при нажатии).
. Полоса прокрутки {
 ширина: 150 пикселей;
 height: 300p # ex3 :: - webkit-scrollbar-thumb {
 background-color: # B03C3F;
 радиус границы: 10 пикселей;
}
 # ex3 :: - webkit-scrollbar-thumb: hover {
 background-color: # BF4649;
 border: 1px solid # 333333;
}
 # ex3 :: - webkit-scrollbar-thumb: active {
 background-color: # A6393D;
 border: 1px solid # 333333;
}
 х;
 цвет фона: светло-серый;
 margin-top: 40px;
 левое поле: 40 пикселей;
 переполнение-y: прокрутка;
 поплавок: левый;
}
. содержание {
 высота: 450 пикселей;
} 
 Тогда полоса прокрутки будет выглядеть так:
 Предварительный просмотр
 Мы устанавливаем границы и радиус границы полосы прокрутки и используем тень блока, чтобы сделать ее стильной. # ex3 :: - webkit-scrollbar-track {
 border: 1px серый сплошной;
 радиус границы: 10 пикселей;
 -webkit-box-shadow: 0 0 6px серая вставка;
} 
 Используя предыдущую процедуру, я создал несколько других полос прокрутки.Я предоставляю для скачивания исходный код других пользователей.
 Hyouk Seo (Spemer) - Настройте полосу прокрутки веб-сайта с помощью CSS 
 Настройка полосы прокрутки веб-сайта с помощью CSS 
 Три строки кода CSS могут сделать полосу прокрутки вашего сайта
 как Mac OS Обычная полоса прокрутки (слева) и настраиваемая (справа) в Chrome
 браузер Хотя полоса прокрутки   занимает в сети лишь небольшую область
 браузер, для меня, как дизайнера интерфейса, он не такой уж маленький и
 нормально игнорировать. Если вы настоящий ботаник, который заботится обо всех
 подробности, этот краткий учебник будет вам полезен.
 Старт 
 Чтобы настроить полосу прокрутки вашего сайта, есть только  необходимо несколько строк кода в вашей таблице стилей . Ты не
 даже нужно написать JavaScript, чтобы настроить его! Следующий код
 фрагмент показывает код CSS для настройки полосы прокрутки веб-браузера.
 Настройка полосы прокрутки веб-браузера - нестандартный способ
 стиль, поэтому вам нужно использовать префикс поставщика  -webkit-  для использования
 псевдоэлементы выше. Только  браузеров Webkit  (например, Chrome,
 Safari) поддерживают эти свойства. Другие браузеры, такие как Firefox или
 IE не поддерживает этот метод.
 
 / * ИМГУР * / Псевдоэлементы 
 Вы можете использовать 7 разных псевдоэлементов для настройки сети. полоса прокрутки браузера.См. Фрагмент кода ниже:
 Я использовал :: - webkit-scrollbar,
 :: - webkit-scrollbar-track и
 :: - webkit-scrollbar-thumb для
 этот учебник. Каждому свойству необходимо  значение  внутри
 кронштейны.
 CodePen 
 Посмотрите, как это работает  CodePen  ниже.Если вы попробуете этот код в IE или Firefox, этот код не будет
 run, и JavaScript вернет альтернативный текст в поле div.
 См. Перо
 настроить полосу прокрутки
 Автор: Хёк Со (@Spemer)
 на CodePen.
 Из моей таблицы стилей 
 Я написал только  три строки кода CSS , чтобы настроить мой
 полоса прокрутки веб-сайта.Для этих методов не требуется ни одной строки
 Код JavaScript, супер простой и легкий в использовании. Проверить ссылку
 ниже, чтобы посмотреть на сайте в прямом эфире!
 Смотрите живую версию на моем
 веб-сайт или проверьте мой код CSS на моем  GitHub 
 Приложения 
 Если вы используете  GitHub Gist  фрагменты кода самостоятельно
 веб-сайт, полосу прокрутки можно настроить, например
 изображение ниже.Мы можем применить этот метод где угодно, если знаем  имя класса  или  ID  элементов, которые мы собираемся
 чтобы настроить их.
 
 Снято с моего сайта Во фрагменте кода Gist используется имя класса
 .blob-wrapper для этого
 полоса прокрутки, чтобы мы могли ее настроить. Скопируйте и вставьте
 Приведенный выше код CSS сделает полосу прокрутки фрагмента кода Gist просто
 как на изображении выше.
 Могу я использовать? 
 На данный момент, когда я пишу эту статью сегодня (5 января 2018 г.),
 результат поиска на caniuse.com говорит  87,07% браузеров  поддерживают
 :: - полоса прокрутки webkit
 псевдоэлементы. Вы можете проверить последний отчет на  caniuse.com .
 Отчет об использовании caniuse.ком Опять же, этот метод работает только на  Браузеры Webkit с префиксом поставщика , * НЕ * работают на
 другие браузеры.
No related posts.