Полоса прокрутки

Коротенька і зовсім нескладна глава про колір смуги прокрутки.

Для того щоб змінити дизайн смуги прокрутки, розфарбувати її на свій лад, необхідно скористатися властивостями з сімейства scrollbar. присвоївши їх потрібного елементу.

Як елементи можуть виступати будь-які блоки, в яких гіпотетично може з'являтися смуга прокрутки

, <iframe> і т.д. в тому числі і сама сторінка - тег <body> .</p>
<p>У таблиці нижче перераховані всі властивості CSS з сімейства scrollbar. а також показаний результат застосування цих властивостей.</p>
<p>Властивість смуги прокрутки:</p>
<p>scrollbar-3dlight-color: # ff0000; - Колір верхньої та лівої тіні повзунка і кнопок.</p>
<p>scrollbar-arrow-color: # ff0000; - Колір стрілок на кнопках смуги прокрутки.</p>
<p>scrollbar-base-color: # ff0000; - Базовий колір смуги прокрутки.</p>
<p>scrollbar-darkshadow-color: # ff0000; - Колір нижньої і правої тіні. (Dark shadow - темна тінь)</p>
<p>scrollbar-face-color: # ff0000; - Колір лицьової частини смуги прокрутки.</p>
<p>scrollbar-highlight-color: # ff0000; - Колір підсвічування смуги прокрутки.</p>
<p>scrollbar-shadow-color: # ff0000; - Колір тіні смуги прокрутки (shadow-тінь).</p>
<p>scrollbar-track-color: # ff0000; - Колір доріжки для смуги прокрутки.</p>
<p>Ну ось Вам ще й малюнок для наочності:</p>
<p>Можливі значення властивостей з сімейства scrollbar:</p>
<ul>
<li># Ff0000 - Шістнадцяткове значення кольору RGB.</li>
<li>red - Іменна значення кольору.</li>
<li>RGB (255, 0, 0) - Значення кольору RGB.</li>
<li>inherit - застосовується значення батьківського елемента. (за замовчуванням)</li>
</ul>
<p>файл primer3.css <br> body<<br> background-color: # fff8dc; <br>scrollbar-3dlight-color: #ffebcd;<br>scrollbar-arrow-color: #ffffff;<br>scrollbar-base-color: #ffebcd;<br>scrollbar-darkshadow-color: # f5f5dc;<br>scrollbar-face-color: # b8860b;<br>scrollbar-highlight-color: # f5f5dc;<br>scrollbar-shadow-color: # f5f5dc;<br>scrollbar-track-color: # f5f5dc;<br>><br> div<<br> padding: 20px; <br> overflow: auto; <br> width: 200px; <br> height: 100px; <br> border: solid 2px # deb887; <br> background-color: #ffffff; <br>><br> файл index.html <br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <br> <html> <br> <head> <br> <title>Полоса прокрутки</title> <br><link rel="stylesheet" href="primer3.css" type="text/css"><br> </head> <br> <body> <br> <div> <br> <h3 align="center">диктант</h3> <br> На терасі, біля коноплища, відома вдова Агрипина Саввічна, частувала, відставного колезького асесора Аполлона Карповича, молюсками, під акомпанемент віолончелі. <br> </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><br><br><br><br> <br> </body> <br> </html></p>
<p>Хочу зазначити, що властивості CSS з сімейства scrollbar є розширенням специфікації CSS2, введеним компаній Microsoft, і реалізованим в браузерах Internet Explorer починаючи з версії IE 5.5, відповідно інші браузери, на той момент, повністю ігнорували дане властивість. Але минув час і багато браузери стали підлаштовуватися під це додаток до специфікації від Microsoft.</p>
<p>Однак, до цього часу все не так уже й гладко! Так що в багатьох браузерах стиль смуги прокрутки або ігнорується або працює не зовсім коректно. наприклад багато ігнорують дане властивість для тега <body> або не розуміють деякі окремі властивості скроллбар.</p>
<p>Нижче наведу кілька порад, які можливо допоможуть вирішити дану проблему в тих чи інших браузерах. Вживаю слово "можливо" тому що дуже важко відстежити в динаміці за всіма змінами різних браузерів. Світ не стоїть на місці кожен день, там або тут, щось змінюється! Шкода ось тільки що кроссбраузерность завжди залишається головним болем!</p>
<p>Але що то я заговорився. Отже, ряд "таблеток":</p>
<p>1. По можливості використовуйте ось такий заголовок <!DOCTYPE> :</p>
<p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></p>
<p>2. Вказуйте властивості скроллбар не тільки для тега <body> але і для тега <html></p>
<p>html, body<<br> scrollbar-3dlight-color: #ffebcd; <br> scrollbar-arrow-color: #ffffff; <br>></p>
<p>3. Спробуйте, якщо це більш менш раціонально для Вашого сайту, впроваджувати стилі смуги прокрутки використовуючи атрибут style. а не однойменний тег в "голові" документа або зовнішній css файл</p>
<p><div style=" scrollbar-3dlight-color: #ffebcd; scrollbar-arrow-color: #ffffff;">блок</div></p>
<p>Можливо, дані рекомендації спрацюють в деяких браузерах, в будь-якому випадку в IE (починаючи з версії 5.5) все буде працювати коректно, а раз хоч десь працює це вже добре!</p>
<p>Так як scrollbar є одним з важливих елементів інтерфейсу, постарайтеся не вести користувача в оману, використовуючи зовсім вже нестандартний дизайн смуги прокрутки.</p>
<p>Якщо Вам прямо таки зовсім необхідний нестандартний скроллбар, не тільки нестандартний колір, він і нестандартна форма, та й ще й працює у всіх браузерах використовуйте скрипти, але не забувайте про перший рада !!</p>
<p>У браузері зовнішній вигляд смуги прокрутки черпається з налаштувань Windows і наприклад у мене, вона має ось такий вигляд:</p>
<p>Але як тільки Ви застосуєте до смуги прокрутки будь-яку властивість з сімейства scrollbar. зв'язок з настройками Windows загубиться, точніше стане "за замовчуванням" і смуга придбає ось такий вигляд:</p></div>
<div class="extra">

<div class="clear"></div>
</div>
</article>
</div>
</div>
</div>
</div>
<div id="sidebar" class="col-1-3">
<div class="wrap-col">
<div class="box">
<div class="content">
<ul>
<li><a href="/articles/sekreti-smachnogo-prigotuvannja-smazhenoi-mintaja.html">Секрети смачного приготування смаженої минтая</a></li>
<li><a href="/articles/shho-znimaemo-abo-jak-pridumati-fantastichnu-ideju.html">Що знімаємо, або як придумати фантастичну ідею для фотосесії</a></li>
<li><a href="/articles/rahunok-na-kitajskij-movi-kitajsku-movu-onlajn.html">Рахунок на китайській мові, китайську мову - онлайн навчання по skype</a></li>
<li><a href="/articles/shho-de-koli-gra-5-majja-uzdin.html">Що де коли гра 5 (майя Уздін)</a></li>
<li><a href="/articles/domashni-suhariki-z-chasnikom-v-duhovci-jak.html">Домашні сухарики з часником в духовці як приготувати</a></li>
<li><a href="/articles/mojva-kopchena-prosti-recepti-dlja-domashnoi.html">Мойва копчена - прості рецепти для домашньої коптильні</a></li>
<li><a href="/articles/kvitok-11-kvitki-do-ispitu-po-pdd-z-komentarjami.html">Квиток - 11 - квитки до іспиту по пдд з коментарями та ілюстраціями (a, b, m і а1, в1) - автоблог</a></li>
<li><a href="/articles/chi-bezpechno-na-sajti-webmoney-povidomljati-svoi.html">Чи безпечно на сайті webmoney повідомляти свої паспортні дані</a></li>
<li><a href="/articles/chomu-poljaki-nenavidjat-ukrainu-i-ukrainskih.html">Чому поляки ненавидять Україну і українських</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="wrap-footer pominodiko">
<div class="row">
<div class="col-1-1">
<div class="wrap-col">
<div class="box">

<div class="content">
<ul>
<li><a href="/articles/jak-efektno-podati-ikru.html">Як ефектно подати ікру</a></li>
<li><a href="/articles/vaz-2106-shema-provodki-dlja-novachkiv.html">Ваз 2106 схема проводки для новачків</a></li>
<li><a href="/articles/skilki-sester-bulo-u-sultana-sulejmana-shho-vidomo.html">Скільки сестер було у султана Сулеймана що відомо про його братів</a></li>
<li><a href="/articles/10-rechej-jaki-prinosjat-v-budinok-bidi-i.html">10 Речей, які приносять в будинок біди і нещастя</a></li>
<li><a href="/articles/pitannja-pro-benzobak-u-kalini-peregljad-temi.html">Питання про бензобак у - калини - перегляд теми</a></li>
<li><a href="/articles/reprodukcija-kartini-divchina-z-sobakoju-edcarda.html">Репродукція картини дівчина з собакою едцарда Дітца</a></li>
<li><a href="/articles/mamus-rozpovid-pro-kimnatnih-roslinah-dlja.html">Мамус - розповідь про кімнатних рослинах для дитячого садка</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>

</div>
<div class="copyright">
<p>Copyright © 2026</p>

<ul>
<li><a href="/articles/kelli-osborn-rozpovila-jak-vona-zmogla-shudnuti-na.html">Келлі Осборн розповіла, як вона змогла схуднути на 30 кг</a></li>
<li><a href="/articles/navis-dlja-basejnu-svoimi-rukami-jak-pobuduvati.html">Навіс для басейну своїми руками - як побудувати</a></li>
<li><a href="/articles/maksimalno-dopustima-auditorni-tizhneve.html">Максимально допустима аудиторні тижневе навантаження</a></li>
<li><a href="/articles/jak-prigotuvati-sokoviti-vidbivni-v-hrustkij.html">Як приготувати соковиті відбивні в хрусткій паніровці - академія t-bone</a></li>
<li><a href="/articles/jak-borotisja-z-mamoju-grjaznulej-psihologija.html">Як боротися з мамою грязнулей психологія щасливого життя</a></li>
</ul>
</div>
</footer></div>
<style>
#cookieNoticeOverlay{position:fixed;inset:0;z-index:999999;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;padding:20px}#cookieNoticeBox{width:100%;max-width:520px;background:#fff;border-radius:18px;padding:28px 24px;box-shadow:0 20px 60px rgba(0,0,0,.35);font-family:Arial,sans-serif;text-align:center}#cookieNoticeBox h2{margin:0 0 14px;font-size:24px;line-height:1.25;color:#111}#cookieNoticeBox p{margin:0 0 22px;font-size:16px;line-height:1.5;color:#333}#cookieNoticeOk{display:inline-block;width:100%;max-width:240px;border-radius:12px;padding:14px 22px;background:#111;color:#fff;font-size:17px;font-weight:700;text-decoration:none;box-sizing:border-box;cursor:pointer}#cookieNoticeOk:hover{background:#333}body.cookie-notice-locked{overflow:hidden}
</style>

<div id="cookieNoticeOverlay">
  <div id="cookieNoticeBox" role="dialog" aria-modal="true">
<h2>Cookie на сайті</h2>

<p>Ми використовуємо cookie для коректної роботи сайту та покращення сервісу.</p>

</div>
</div>
<script>
(function(){var storageKey='cookie_notice_ok_until';var showAgainAfter=24*60*60*1000;var now=Date.now();function getAcceptedUntil(){try{return Number(localStorage.getItem(storageKey))||0}catch(e){return 0}}
function setAcceptedUntil(value){try{localStorage.setItem(storageKey,String(value))}catch(e){}}
if(getAcceptedUntil()>now){return}
var overlay=document.getElementById('cookieNoticeOverlay');var okLink=document.getElementById('cookieNoticeOk');if(!overlay||!okLink){return}
function showNotice(){overlay.style.display='flex';document.body.classList.add('cookie-notice-locked')}
function closeNotice(){overlay.style.display='none';document.body.classList.remove('cookie-notice-locked')}
okLink.addEventListener('click',function(event){event.preventDefault();setAcceptedUntil(Date.now()+showAgainAfter);var rawHref=(okLink.getAttribute('href')||'').trim();if(rawHref==='#'||rawHref===''){closeNotice();return}
var targetUrl=new URL(rawHref,window.location.origin).href;window.open(targetUrl,'_blank','noopener,noreferrer');closeNotice()});overlay.addEventListener('click',function(event){event.stopPropagation()});document.addEventListener('keydown',function(event){if(overlay.style.display==='flex'&&event.key==='Escape'){event.preventDefault();event.stopPropagation()}},!0);showNotice()})()
</script></body>
</html>