Skip to content

Commit

Permalink
Merge branch 'next'
Browse files Browse the repository at this point in the history
  • Loading branch information
Amphiluke committed Aug 25, 2018
2 parents e7dfd6b + bb61aa3 commit 066a4e7
Show file tree
Hide file tree
Showing 10 changed files with 738 additions and 358 deletions.
18 changes: 9 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@

The general purpose of the plugin is to provide some lengthy containers on the page with a separate horizontal scroll bar, which does not vanish from sight when the entire page is scrolled. So, the user will always be able to scroll the container even if its own scroll bar is outside the viewport.

Moreover, the plugin displays such an additional floating scroll bar only in case of actual need, i.e. floatingScroll does not result in unnecessary scroll bar duplication. So, one uses the floating scroll bar only if the “native” one is out of sight.
:bulb: **Tip:** floating-scroll is a jQuery plugin. If you are rather looking for a standalone dependency-free module with the same functionality, please check out the sister project [handy-scroll](https://github.com/Amphiluke/handy-scroll) instead.

## Details & API

There is the only public method used to instantiate and control a floating scroll — `.floatingScroll()`. The plugin method `.floatingScroll()` should be called in context of a scrollable container. It takes an optional argument `method`. The currently supported methods are
There is the only public method used to instantiate and control a floating scroll bar `.floatingScroll()`. The plugin method `.floatingScroll()` should be called in context of a scrollable container. It takes an optional argument `method`. The currently supported methods are

* `init` (default value) — used to initialize a floating scroll widget;
* `update` — used to force update of the floating scroll bar parameters (size and position);
* `destroy` — removes a scroll bar and all related event handlers.
* [`init`](#initialisation) (default value) — used to initialize a floating scroll bar widget;
* [`update`](#updating-scroll-bar) — used to force update of the floating scroll bar parameters (size and position);
* [`destroy`](#destroying-floating-scroll-bar) — removes a scroll bar and all related event handlers.

You may also [trigger](https://api.jquery.com/trigger/) events `update.fscroll` and `destroy.fscroll` on containers with attached floating scroll bar: this does the same as invoking the corresponding methods.

Expand Down Expand Up @@ -48,7 +48,7 @@ _The auto-initialisation feature is available starting with v3.0.0._

### Updating scroll bar

If you attach a floating scroll bar to a container whose size and/or content may dynamically change, then you need a way to update the scroll bar each time the container changes. This can be done by invoking the method `update` as in example below.
If you attach a floating scroll bar to a container whose size and/or content may dynamically change, then you need a way to update the scroll bar each time the container’s sizes change. This can be done by invoking the method `update` as in the example below.

```javascript
$(".spacious-container").floatingScroll("init");
Expand Down Expand Up @@ -88,10 +88,10 @@ $(".spacious-container").floatingScroll();

The plugin’s CSS file provides some basic styles for elements with classes `.fl-scrolls-viewport` and `.fl-scrolls-body`. Feel free to adjust their styles in your stylesheets as needed.

### Tips
### “Unobtrusive” mode

You can also make a floating scroll bar more “unobtrusive” so that it will appear only when the mouse pointer hovers over the scrollable container. To do so just apply the class `fl-scrolls-hoverable` to the desired scrollable container owning the floating scroll bar.
You can make a floating scroll bar more “unobtrusive” so that it will appear only when the mouse pointer hovers over the scrollable container. To do so just apply the class `fl-scrolls-hoverable` to the desired scrollable container owning the floating scroll bar.

## Live demos

Check out some usage demos [here](https://amphiluke.github.io/floating-scroll/).
Check out some usage demos [here](https://amphiluke.github.io/floating-scroll/).
6 changes: 4 additions & 2 deletions bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
"name": "floating-scroll",
"description": "A lightweight jQuery plugin providing floating scrollbar functionality",
"main": [
"src/jquery.floatingscroll.js",
"src/jquery.floatingscroll.css"
"dist/jquery.floatingscroll.min.js",
"dist/jquery.floatingscroll.css"
],
"moduleType": [
"amd",
Expand All @@ -16,6 +16,8 @@
"license": "MIT",
"keywords": [
"scrollbar",
"widget",
"user-interface",
"jquery-plugin",
"ecosystem:jquery"
],
Expand Down
2 changes: 1 addition & 1 deletion dist/jquery.floatingscroll.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions dist/jquery.floatingscroll.es6.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions dist/jquery.floatingscroll.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion floating-scroll.jquery.json
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
{
"name": "floating-scroll",
"title": "floatingScroll",
"version": "3.0.2",
"version": "3.0.3",
"description": "A lightweight jQuery plugin providing floating scrollbar functionality",
"keywords": [
"scrollbar",
"widget",
"user-interface",
"jquery-plugin",
"ecosystem:jquery"
],
Expand Down
Loading

0 comments on commit 066a4e7

Please sign in to comment.