Code Monkey home page Code Monkey logo

jquery-slimscroll's Introduction

What is slimScroll?

slimScroll is a small jQuery plugin that transforms any div into a scrollable area with a nice scrollbar - similar to the one Facebook and Google started using in their products recently. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over. User can drag the scrollbar or use mouse-wheel to change the scroll value.

Demo and deocumentation available here: jQuery slimScroll docs

#This Fork Supports both Horizontal and Vertical Scrollbars.

The initialization options have been modified to accomodate horizontal scroll bars. See below for details.

axis - x(X) or y(Y) or both - Axis to apply scrollbars. Default: y.
Note: the plugin detects if the content size exceeds the div dimensions and creates scrollbars accordingly. If width and height are specified in the options, they'll be used in place of the div dimensions.

width - Width in pixels of the visible scroll area. Stretch-to-parent if not set. Default: auto

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

positionX - top or bottom. Sets the position of the horizontal scrollbar. Default: bottom

positionY - left or right. Sets the position of the vertical 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 property. Default:1px

startX - left or right or $(selector) - defines initial position of the horizontal scrollbar. When set to left it automatically scrolls to the left of the scrollable container. When HTML element is passed, slimScroll defaults to offsetLeft of this element. Default: left.

startY - top or bottom or $(selector) - defines initial position of the vertical 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 extremities of the container. When set to true is scrolls the page. Default: false

scrollToX - Jumps to the specified horizontal scroll value. Can be called on any element with slimScroll already enabled.
Example: $(element).slimScroll({ scrollToX: '50px' });

scrollByX - Increases/decreases current horizontal scroll value by specified amount (positive or negative). Can be called on any element with slimScroll already enabled.
Example: $(element).slimScroll({ scrollByX: '60px' });

scrollToY - Jumps to the specified vertical scroll value. Can be called on any element with slimScroll already enabled.
Example: $(element).slimScroll({ scrollToY: '50px' });

scrollByY - Increases/decreases current vertical scroll value by specified amount (positive or negative). Can be called on any element with slimScroll already enabled.
Example: $(element).slimScroll({ scrollByY: '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 publishes slimscrollX, slimscrollY, slimscrollingX and slimscrollingY events when the corresponding scrollbar moves along the parent container. You can use jQuery bind method to subscribe to these events

    $(selector).slimScroll().bind('slimscrollX', function(e, pos){
        console.log("Horizontal Scrollbar Reached " + pos + "px");
    });

Copyright (c) 2011 Piotr Rochala (http://rocha.la), Lanre Adebambo
Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.

jquery-slimscroll's People

Contributors

aasanchez avatar adeelnawaz avatar aidik avatar argon avatar chawkinsuf avatar d13 avatar dotansimha avatar gvmh avatar irealnirmal avatar joshuaballoch avatar jwchang0206 avatar kamens avatar lanre-ade avatar laomao800 avatar louy avatar piotrr-sportsbet avatar ramsay avatar robink avatar rochal avatar sovanna avatar spartakusmd avatar steelywing avatar sualko avatar umarfkhawaja avatar websitedeveloper avatar zensh avatar ziscloud avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.