Как изменить прокрутку Bar Style

Question

Мне нравится знать, как добавить пользовательскую полосу прокрутки в таблицу (таблицу элементов). Я написал код ниже. После добавления 10 элементов появляется полоса прокрутки, но мне нравится панель пользовательского прокрутки (например: прокрутка, например, в fb).

<form action="#" method="get"><style type="text/css">.carttable{width: 252px;height: 200px;overflow: auto;} 

Answer 1

Заголовок:

<script type="text/javascript" id="sourcecode"> 
$j=jQuery.noConflict(); 
$j(function() 
{ 
    $j('.scroll-pane').jScrollPane({ 
    showArrows: true, 
    autoReinitialise: true}); 
}); 
</script> 

CSS

/* Стили специфичные для данной конкретной страницы */

.scroll-pane 
{ 
width: 100%; 
height: auto; 
overflow: auto; 
} 

/* * CSS стили, Neede d jScrollPane для правильной работы. * * Включите эту таблицу стилей на свой сайт или скопируйте и вставьте стили ниже в таблицу стилей - jScrollPane * может работать неправильно без них. */

.jspContainer { 
overflow: hidden; 
position: relative; 
} 

.jspPane { 
position: absolute; 
} 

    .jspVerticalBar { 
    background: none repeat scroll 0 0 none; 
    height: 100%; 
    position: absolute; 
    right: 0; 
top: 0; 
width: 16px; 
} 
    .jspHorizontalBar { 
background: none repeat scroll 0 0 none; 
bottom: 0; 
height: 16px; 
left: 0; 
position: absolute; 
width: 100%; 
} 


.jspVerticalBar *, .jspHorizontalBar * { 
margin: 0; 
padding: 0; 
} 

.jspCap { 
display: none; 
} 
.jspHorizontalBar .jspCap { 
float: left; 
} 
.jspTrack { 
background: url(scroll-images/groen-streepje.png) 0 0 repeat-y scroll; 
position: relative; 
} 

.jspDrag { 
background: none repeat scroll 0 0 #ACC314; 
cursor: pointer; 
left: 0; 
position: relative; 
top: 0; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; 
} 

.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag { 
float: left; 
height: 100%; 
} 

    .jspArrow { 
    background: url(scroll-images/pijltjes.png) 0 0 no-repeat scroll; 
cursor: pointer; 
display: block; 
text-indent: -20000px; 
    } 

    .jspArrow.jspDisabled { 
    background: url(scroll-images/pijltjes.png) 0 -9px no-repeat scroll; /* ander kleur pijltje */ 
cursor: default; 
    } 

.jspVerticalBar .jspArrow { 
height: 9px; 
} 

.jspHorizontalBar .jspArrow { 
float: left; 
height: 100%; 
width: 16px; 
    } 

.jspVerticalBar .jspArrow:focus { 
outline: medium none; 
    } 

.jspCorner { 
background: none repeat scroll 0 0 #EEEEF4; 
float: left; 
height: 100%; 
} 

* html .jspCorner { 
margin: 0 -3px 0 0; 
} 

.jspArrowUp 
{ 
background-position: 0 0; 
} 

.jspArrowDown 
{ 
background-position: -15px 0 !important; /* twee pijlen in één png zetten */ 
} 
.jspArrowDown.jspDisabled { 
background-position: -15px -9px !important; /* twee pijlen in één png zetten */ 
} 
.scroll-pane 
{ 
width: 100%; 
overflow: auto; 
z-index: 99; 
} 

Answer 2

Nicescroll 3 внушение Cmacu работает очень хорошо! Вы пробовали? Он имеет много приятных функций для персонализации внешнего вида панели, а также поддерживает горизонтальную панель, поддерживает множество браузеров на настольной и мобильной версии. Здесь вы можете найти несколько примеров: Live Examples. В файле загрузки есть много других примеров в HTML-файлах, так как вы знаете, как это работает.

Просто поместите тег сценария загрузки на заголовок после jQuery, а затем вызовите функцию, когда страница загружена.

HTML

<script type="text/javascript" src="jquery.nicescroll.js"></script> 

JavaScript файл

$(document).ready(

    function() { 

    $("html").niceScroll({cursoropacitymax:0.6, cursorwidth:10px, horizrailenabled:false}); 

    } 

); 

Для персонализировать внешний вид полосы прокрутки, вы должны пройти входы на функцию в приведенном выше примере. Вы можете найти все входные данные в конце главной страницы, раздел «Параметры конфигурации».