Download the PHP package invis1ble/scrollbox without Composer
On this page you can find all versions of the php package invis1ble/scrollbox. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package scrollbox
Scrollbox
A lightweight jQuery custom scrollbar plugin, that triggers event when reached the defined point.
Table of contents
- Browser compatibility
- Installation
- Usage
- Basic features
- Options
- Methods
- Events
- Infinite scrolling implementation example
- License
Browser compatibility
- IE 7+
- Firefox
- Opera (old and new)
- Safari
- Chrome
- Chrome for Android
... and others.
Scrollbox is automatically tested on the following browsers
Installation
Several quick start options are available:
- Download the latest release.
- Clone the repo:
git clone https://github.com/Invis1ble/scrollbox.git. - Install with Bower:
bower install scrollbox. - Install with npm:
npm install scrollbox. - Install with Composer:
composer require invis1ble/scrollbox.
After installing the plugin you have to install jquery-mousewheel. You can simply download it as archive and unpack to desired location.
Usage
In order to use the plugin, you have to include styles and script to your html e.g.:
Let's assume that you want to stylize the following element:
Then you should define max-height and/or max-width of that element:
and initialize Scrollbox:
That's all.
Now if real size of the container is greater than the specified max-height/max-width then the plugin will add scrollbar to it.
You can stylize scrollbar via css or even better by overwriting corresponding less variables.
See src/less/ for more details.
Basic features
Options
Scrollbox uses several options to configuring behavior. The default options are:
You can optionally pass an object containing all of the options that you would like to initialize Scrollbox with e.g.:
or re-define default values for all instances:
startAt.x
The initial position of the scroll on x-axis.
The value can be 'left', 'right' or number of pixels from the left boundary.
startAt.y
The initial position of the scroll on y-axis.
The value can be 'top', 'bottom' or number of pixels from the top boundary.
distanceToReach.x
The distance from the left and right boundaries of the content when reachleft.scrollbox and reachright.scrollbox events should be triggered.
This option is useful when you want to implement so-called "infinite scrolling".
distanceToReach.y
The distance from the top and bottom boundaries of the content when reachleft.scrollbox and reachright.scrollbox events should be triggered.
This option is useful when you want to implement so-called "infinite scrolling".
wheelSensitivity
The distance in pixels for one fixed step of mouse wheel.
You probably shouldn't change this value.
momentum.acceleration
Swipe acceleration factor.
momentum.thresholdTime
Threshold time in milliseconds for detect inertial moving at swipe.
templates
Normally you don't need to change this templates, but you can if you want.
Methods
You can call some methods of the plugin.
.update()
Recalculates scrollbars' positions and sizes.
For example, If you write the infinite scroll implementation you have to update scrollbar position and size after content has been added.
To do this you should simply call .update() method:
.scrollBy(deltaX, deltaY, animationOptions)
Scrolls by pixels.
See .animate() for the available values of the animationOptions
Example:
If you want to scroll only on y-axis you can pass 0 as deltaX value:
.scrollTo(x, y, animationOptions)
Scrolls to specified position.
x can be integer (pixels), or string 'left' or 'right'.
y also can be integer (pixels), or string 'top' or 'bottom'.
'left', 'right', 'top' and 'bottom' means the boundaries.
See .animate() for the available values of the animationOptions
Example:
If you want to scroll only on y-axis you can pass undefined as x value:
.destroy()
Completely removes all stuff from the element.
Events
Scrollbox triggers a several events during lifecycle.
reachleft.scrollbox
Triggered when scrolling reach the left boundary of the content. Respects distanceToReach.x option.
reachright.scrollbox
Triggered when scrolling reach the right boundary of the content. Respects distanceToReach.x option.
reachtop.scrollbox
Triggered when scrolling reach the top boundary of the content. Respects distanceToReach.y option.
reachbottom.scrollbox
Triggered when scrolling reach the bottom boundary of the content. Respects distanceToReach.y option.
Infinite scrolling implementation example
License
The MIT License
