一個很好的滾動條外掛jquery.slimscroll.js
該外掛的下載地址:
https://codeload.github.com/rochal/jQuery-slimScroll/zip/v1.3.0
安裝Set up
首先需要引入jquery
在次需要引入:<script src="${ctx }/common/js/jquery.slimscroll.js" type="text/javascript"></script>
一個example如下:
html:
<div class="some-content-related-div"> <div id="inner-content-div"> <p>Lorem ipsum dolor sit amet, consectetur .... snip</p> </div> </div>
j程式碼:
$(function(){
$('#inner-content-div').slimScroll({
height: '250px'
});
});
效果如下:
width - Width in pixels of the visible scroll area. Stretch-to-parent if not set. Default: none
height - Height in pixels of the visible scroll area. Also supports auto to set the height to same as parent container. Default:
250px
size - Width in pixels of the scrollbar. Default: 7px
position - left
or right
. Sets the
position of the scrollbar. Default: right
color - Color in hex of the scrollbar. Default: #000000
alwaysVisible - Disables scrollbar hide. Default: false
distance - Distance in pixels from the edge of the parent element where scrollbar should appear. It is used together with position
1px
start - top
or bottom
or $(selector)
-
defines initial position of the scrollbar. When set to bottom
it automatically scrolls to the bottom of the scrollable container. When HTML element is passed, slimScroll
defaults to offsetTop of this element. Default: top
.
wheelStep - Integer value for mouse wheel delta. Default: 20
railVisible - Enables scrollbar rail. Default: false
railColor - Sets scrollbar rail color, Default: #333333
railOpacity - Sets scrollbar rail opacity. Default: 0.2
allowPageScroll - Checks if mouse wheel should scroll page when bar reaches top or bottom of the container. When set to true is scrolls the page.Default: false
scrollTo - Jumps to the specified scroll value. Can be called on any element with slimScroll already enabled. Example: $(element).slimScroll({
scrollTo: '50px' });
scrollBy - Increases/decreases current scroll value by specified amount (positive or negative). Can be called on any element with slimScroll already enabled. Example: $(element).slimScroll({
scrollBy: '60px' });
disableFadeOut - Disables scrollbar auto fade. When set to true scrollbar doesn't disappear after some time when mouse is over the slimscroll div.Default: false
touchScrollStep - Allows to set different sensitivity for touch scroll events. Negative number inverts scroll direction.Default: 200
Events
slimScroll publishesslimscroll
event
when scrollbar reaches top or bottom of the parent container. You can use jQuery bind
method
to subscribe to this
Event example:
$(selector).slimScroll().bind('slimscroll', function(e, pos){
console.log("Reached " + pos");
});
感謝這個連結的作者:http://rocha.la/jQuery-slimScroll/!