CODEWITHSUNDEEP
jqueryscrollbarjscrollpane
Zain
Zain

Reputation: 285

How to change scroll Bar Style

I like to know how to add a custom scroll bar to a table (item table). I have written the code below. Once 10 items are added the scroll bar appears,but i like a custom scroll pane to appear (eg: a scroll like in fb). 

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

Upvotes: 0

Views: 4656

Answers (2)

Pedro Gelli
Pedro Gelli

Reputation: 171

The Nicescroll 3 suggestion of Cmacu works very well! Did you tried? It have many nice features for personalize the appearance of the bar and also support horizontal bar, it support many browsers on desktop and mobile version. You can find some examples here: Live Examples. The download file have many others examples in HTML files for you know how it works.

Just put loading script tag on header after jQuery and then call the function when page is loaded.

HTML 

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

JavaScript file

$(document).ready(

  function() { 

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

  }

);

For personalize the appearance of the scroll bar you have to pass inputs on the function as the example above. You can find all the availables inputs at the end of the main page, section "Configuration parameters".

Upvotes: 1

Deepika C P
Deepika C P

Reputation: 1303

header:

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

css

/* Styles specific to this particular page */

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

/* * CSS Styles that are needed by jScrollPane for it to operate correctly. * * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane * may not operate correctly without them. */

.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;
}

Upvotes: 0

Related Questions