Skip to content

Commit

Permalink
Merge branch 'v3' into master
Browse files Browse the repository at this point in the history
  • Loading branch information
Amphiluke committed Apr 8, 2018
2 parents b4664ea + a74cfb5 commit 752d4ed
Show file tree
Hide file tree
Showing 15 changed files with 2,591 additions and 446 deletions.
1 change: 1 addition & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
dist/*
36 changes: 34 additions & 2 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -1,15 +1,24 @@
{
"env": {
"browser": true,
"amd": true,
"commonjs": true,
"es6": true,
"node": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module"
},
"rules": {
"array-bracket-spacing": [
"error"
],
"arrow-body-style": [
"warn"
],
"arrow-spacing": [
"error"
],
"block-spacing": [
"error",
"never"
Expand All @@ -24,6 +33,9 @@
"comma-style": [
"error"
],
"computed-property-spacing": [
"error"
],
"curly": [
"error"
],
Expand Down Expand Up @@ -60,6 +72,10 @@
"new-parens": [
"error"
],
"no-console": [
"error",
{"allow": ["info", "warn", "error"]}
],
"no-multi-spaces": [
"error"
],
Expand All @@ -72,19 +88,35 @@
"no-useless-call": [
"error"
],
"no-useless-computed-key": [
"error"
],
"no-var": [
"error"
],
"no-whitespace-before-property": [
"warn"
],
"object-curly-spacing": [
"error"
],
"object-shorthand": [
"warn"
],
"operator-assignment": [
"warn"
],
"operator-linebreak": [
"error",
"after"
],
"prefer-arrow-callback": [
"error",
{"allowNamedFunctions": true}
],
"prefer-rest-params": [
"error"
],
"quotes": [
"error",
"double"
Expand Down
4 changes: 3 additions & 1 deletion .npmignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
.idea
bower_components
.eslint*
bower.json
.eslint*
rollup.config.js
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Before submitting a new pull request be sure to do the following things.
* Test your changes in different browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and Edge.
* Note that the plugin is currently compatible with ancient versions of jQuery (1.4.3+). If your changes break this compatibility please think if you can rewrite your code to keep compatibility unaffected. However if your changes are so important and cool that they outweigh all benefits of supporting ancient versions of jQuery then it is possible to soften this requirement within reasonable limits.
* Before committing your changes please make sure that the plugin sources pass ESLint checks. Just use the command `npm run lint` in the project directory (of course, you need to install the project first by executing `npm install`). Fix any problems reported by ESLint before submitting a pull request.
* Do not forget to update the minified version of the plugin sources. Use the command `npm run minify` for that. If you changed the file of plugin styles (`jquery.floatingscroll.less`) run `npm run make-css` to update the minified CSS file as well.
* Do not forget to update the minified version of the plugin sources. Use the command `npm run build` for that.

Thanks for contribution! :tea:

Expand Down
34 changes: 22 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,36 +2,50 @@

## The Crux of the Matter

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 hidden from view.
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. the 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.
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.

## Details & API

There is the only public method used to instantiate and control a floating scroll — `.floatingScroll()` (note that the old method alias `attachScroll` is kept for backward compatibility, but it will be removed in future versions). 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 — `.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.

You may also trigger events `update.fscroll` and `destroy.fscroll` for containers with attached floating scroll bar: this does the same as invoking the corresponding methods.
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.

## Usage

### Inclusion of plugin files

The plugin requires the CSS file [jquery.floatingscroll.css](src/jquery.floatingscroll.css) to be included on the page (you may also import it in your CSS/LESS files). The plugin's script file [jquery.floatingscroll.min.js](src/jquery.floatingscroll.min.js) may be added on the web page either via a separate `<script>` element or it may be loaded by any AMD/CommonJS compatible module loader. This is a jQuery plugin so be sure that this library is added and accessible.
The plugin requires the CSS file [jquery.floatingscroll.css](dist/jquery.floatingscroll.css) to be included on the page (you may also import it in your CSS/LESS files). The plugin’s script file [jquery.floatingscroll.min.js](dist/jquery.floatingscroll.min.js) may be added on the web page either via a separate `<script>` element, or it may be loaded by any AMD/CommonJS compatible module loader. This is a jQuery plugin so be sure that this library is added and accessible.

:bulb: **Tip:** If you don’t care about supporting old browsers, feel free to use the file [jquery.floatingscroll.es6.min.js](dist/jquery.floatingscroll.es6.min.js), which is de facto the same as jquery.floatingscroll.min.js but is written in ES6, and is a bit smaller.

### Initialisation

The only thing required to apply the floatingScroll to a static container (whose sizes will never change during the session) is a single call of the `.floatingScroll()` method on the DOM ready event:
The only thing required to apply floatingScroll to a static container (whose sizes will never change during the session) is a single call of the `.floatingScroll()` method on the DOM ready event:

```javascript
$(document).ready(function () {
$(".spacious-container").floatingScroll();
});
```

### Auto-initialisation

There is another way of initialising the floatingScroll widget without writing a single line of JavaScript code. Just add an attribute `data-fl-scrolls` to the desired container. As the DOM is ready the plugin will detect all such elements and will do initialisation automatically.

```html
<div class="spacious-container" data-fl-scrolls>
<!-- Horizontally wide contents -->
</div>
```

_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.
Expand Down Expand Up @@ -72,16 +86,12 @@ The `.fl-scrolls-viewport` element (1) is a positioned block (with any type of p
$(".spacious-container").floatingScroll();
```

The plugin's CSS 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.
The plugins 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

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.

## Live demos

You may find some demos of use the floatingScroll plugin [here](https://amphiluke.github.io/floating-scroll/).

## Previous versions

Prior to v2.2.0, the plugin was the part of the [jquery-plugins](https://github.com/Amphiluke/jquery-plugins) repo. If for some purpose you want to get commit history for older plugin versions, you can [extract](https://github.com/Amphiluke/jquery-plugins/commits/master/src/floatingscroll) it from that “old” repo.
Check out some usage demos [here](https://amphiluke.github.io/floating-scroll/).
4 changes: 3 additions & 1 deletion bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,9 @@
"bower_components",
"test",
"tests",
"package.json"
"package.json",
"package-lock.json",
"rollup.config.js"
],
"dependencies": {
"jquery": ">=1.4.3"
Expand Down
File renamed without changes.
14 changes: 14 additions & 0 deletions dist/jquery.floatingscroll.es6.min.js

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

14 changes: 14 additions & 0 deletions dist/jquery.floatingscroll.min.js

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

2 changes: 1 addition & 1 deletion floating-scroll.jquery.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "floating-scroll",
"title": "floatingScroll",
"version": "2.3.3",
"version": "3.0.0",
"description": "A lightweight jQuery plugin providing floating scrollbar functionality",
"keywords": [
"scrollbar",
Expand Down
Loading

0 comments on commit 752d4ed

Please sign in to comment.