Перекрестный браузер стиля прокрутки CSS

Ответ 1

Стили CSS для прокрутки - это странность, придуманная разработчиками Microsoft. Они не являются частью стандарта W3C для CSS, и поэтому большинство браузеров просто игнорируют их.

Ответ 2

Поддержка Webkit для полос прокрутки довольно сложная. Этот CSS дает очень минимальную полосу прокрутки, с легкой серой дорожкой и более темным пальцем:

::-webkit-scrollbar
{
  width: 12px;  /* for vertical scrollbars */
  height: 12px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track
{
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb
{
  background: rgba(0, 0, 0, 0.5);
}

Этот ответ является фантастическим источником дополнительной информации.

Ответ 3

jScrollPane - это хорошее решение для перекрестных полос прокрутки браузера и ухудшается.

Ответ 4

nanoScrollerJS просто использовать. Я всегда использую их...

Browser compatibility:

• IE7+
• Firefox 3+
• Chrome
• Сафари 4+
• Опера 11. 60+

Mobile browsers support:

• iOS 5+ (iPhone, iPad и iPod Touch)
• iOS 4 (с поли заливкой)
• Android Firefox
• Собственный браузер Android 2.2/2.3 (с полифилом)
• Android Opera 11.6 (с полифилом)

Пример кода из документации,

1. Разметка - для работы плагина необходим следующий тип структуры разметки.

<div id="about" class="nano">
    <div class="nano-content"> ... content here ...  </div>
</div>

Ответ 5

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

Если вы действительно хотите, чтобы кросс-браузерное решение, которое вы можете полностью настроить, вам придется использовать некоторые JS. Вот ссылка на хороший плагин для него под названием FaceScroll: http://www.dynamicdrive.com/dynamicindex11/facescroll/index.htm

Ответ 6

попробуйте это, он очень прост в использовании и проверке на IE, Safari и FF и отлично работает, и вокруг не нужно много div вокруг него просто добавить id, и он будет работать нормально, после того, как вы свяжетесь с Js и Css файлы. Пользовательская полоса прокрутки FaceScroll

надеюсь, что это поможет

Edit Шаг 1: Добавьте ниже script в раздел вашей страницы:

<link href="general.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>

<script type="text/javascript" src="facescroll.js"></script>
<script type="text/javascript">
    jQuery(function(){ // on page DOM load
        $('#demo1').alternateScroll();
        $('#demo2').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });  
    })
</script>

Шаг 2: Затем в BODY вашей страницы добавьте ниже примерный блок HTML на свою страницу.

<p><b>Scrollbar (default style) shows onMouseover</b></p>

<div id="demo1" style="width:300px; height:250px; padding:8px; background:lightyellow; border:1px solid gray; resize:both; overflow:scroll">

From Wikipedia- Gunpowder, also known since in the late 19th century as black powder, was the first chemical explosive and the only one known until the mid 1800s.[2] It is a mixture of sulfur, charcoal, and potassium nitrate (saltpeter) - with the sulfur and charcoal acting as fuels, while the saltpeter works as an oxidizer.[3] Because of its 
</div>

<br />

<p><b>Scrollbar (alternate style), always shown</b></p>

<div id="demo2" style="width:400px; height:130px; padding:10px; padding-right:8px; background:lightyellow; border:1px solid gray; overflow:scroll; resize:both;">

From Wikipedia- Gunpowder, also known since in the late 19th century as black powder, was the first chemical explosive and the only one known until the mid 1800s.[2] It is a mixture of sulfur, charcoal, and potassium nitrate (saltpeter) - with the sulfur and charcoal acting as fuels, while the saltpeter works as an oxidizer.[3] Because of its 
</div>