Permalink
Comparing changes
Open a pull request
2
contributors
Commits on Apr 27, 2017
Commits on May 09, 2017
Commits on Nov 02, 2017
Commits on Mar 05, 2018
- Added multiple sites using multiScroll.js
- Improving mobile detection
Commits on Mar 07, 2018
- Updating version and dist files
- Updating version and dist files
Commits on Aug 01, 2018
- Fixed bug: doneResizing is not defined #105
Commits on Sep 11, 2019
Commits on Oct 29, 2019
update README.md
Unified
Split
Showing
with
5,712 additions
and 1,768 deletions.
- +37 −12 README.md
- +1 −1 bower.json
- +16 −3 dist/jquery.multiscroll.css
- +2 −2 dist/jquery.multiscroll.extensions.min.js
- +904 −864 dist/jquery.multiscroll.js
- +2 −2 dist/jquery.multiscroll.min.css
- +1 −1 dist/jquery.multiscroll.min.css.map
- +2 −2 dist/jquery.multiscroll.min.js
- +1 −1 dist/jquery.multiscroll.min.js.map
- +6 −6 examples/css3.html
- +74 −0 examples/scrollable.html
- +3 −1 gulpfile.js
- +16 −3 jquery.multiscroll.css
- +904 −864 jquery.multiscroll.js
- +2 −3 jquery.multiscroll.min.js
- +3,734 −0 package-lock.json
- +7 −3 package.json
| @@ -4,8 +4,7 @@ | ||
|  | ||
|
|
||
| --- | ||
|
|
||
|  | ||
|  | ||
| [](http://opensource.org/licenses/MIT) | ||
| [](https://www.paypal.me/alvarotrigo/9.95) | ||
| **|** *3.7Kb gziped* **|** *Created by [@imac2](https://twitter.com/imac2)* | ||
| @@ -133,6 +132,8 @@ $(document).ready(function() { | ||
| paddingTop: 0, | ||
| paddingBottom: 0, | ||
| normalScrollElements: null, | ||
| scrollOverflow: false, | ||
| scrollOverflowOptions: null, | ||
| keyboardScrolling: true, | ||
| touchSensitivity: 5, | ||
| @@ -220,6 +221,10 @@ It requires the file `vendors/jquery.easings.min.js` or [jQuery UI](http://jquer | ||
|
|
||
| - `normalScrollElements`: (default `null`) If you want to avoid the auto scroll when scrolling over some elements, this is the option you need to use. (useful for maps, scrolling divs etc.) It requires a string with the jQuery selectors for those elements. (For example: `normalScrollElements: '#element1, .element2'`) | ||
|
|
||
| - `scrollOverflow`: (default `false`) [Demo](https://alvarotrigo.com/multiScroll/extensions/scrollOverflow.html) | [Extension of multiScroll.js](http://alvarotrigo.com/multiScroll/extensions/). (not compatible with IE 8) defines whether or not to create a scroll bar for the section/slide in case its content is bigger than the viewport's height. When set to `true`, your content will be wrapped by multiScroll.js. Consider using delegation or load your other scripts in the `afterRender` callback. | ||
|
|
||
| - `scrollOverflowOptions`: (default `null`) when using `scrollOverflow:true` multiScroll.js will make use of a forked and modified version of [iScroll.js library](https://github.com/cubiq/iscroll/). You can customize the scrolling behaviour by providing multiScroll.js with the iScroll.js options you want to use. Check its [documentation](http://iscrolljs.com/) for more info. | ||
|
|
||
| - `keyboardScrolling`: (default `true`) Defines if the content can be navigated using the keyboard | ||
|
|
||
| - `touchSensitivity`: (default 5) Defines a percentage of the browsers window width/height, and how far a swipe must measure for navigating to the next section. | ||
| @@ -254,11 +259,11 @@ $('#multiscroll').multiscroll({ | ||
|
|
||
| - `rightSelector`: (default `.ms-right`) You can use own class name for right block. | ||
|
|
||
| - `responsiveWidth`: (default `0`) Normal scroll will be used under the defined width in pixels. A class `ms-responsive` is added to the body tag in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser's width is less than 900 the plugin will scroll like a normal site. | ||
| - `responsiveWidth`: (default `0`) Only useful when using the option `responsiveExpand`. Normal scroll will be used under the defined width in pixels. A class `ms-responsive` is added to the body tag in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser's width is less than 900 the plugin will scroll like a normal site. | ||
|
|
||
| - `responsiveHeight`: (default `0`) Normal scroll will be used under the defined height in pixels. A class `ms-responsive` is added to the body tag in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser's height is less than 900 the plugin will scroll like a normal site. | ||
| - `responsiveHeight`: (default `0`) Only useful when using the option `responsiveExpand`. Normal scroll will be used under the defined height in pixels. A class `ms-responsive` is added to the body tag in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser's height is less than 900 the plugin will scroll like a normal site. | ||
|
|
||
| - `responsiveExpand`: (default `false`) [Extension of multiScroll.js](http://alvarotrigo.com/multiScroll/extensions/). When responsive mode is fired (by using the `responsiveWidth` or `responsiveHeight` options detailed above) it turns auto scrolling off and expands each left and right side into a full-width section placing one after another. Then the page can be scrolled normally. [Read more about how to use the Responsive Expand option.](https://github.com/alvarotrigo/multiscroll.js/wiki/Responsive-Expand-Extension) | ||
| - `responsiveExpand`: (default `false`) [Demo](https://alvarotrigo.com/multiScroll/extensions/responsive-expand.html) | [Extension of multiScroll.js](http://alvarotrigo.com/multiScroll/extensions/). When responsive mode is fired (by using the `responsiveWidth` or `responsiveHeight` options detailed above) it turns auto scrolling off and expands each left and right side into a full-width section placing one after another. Then the page can be scrolled normally. [Read more about how to use the Responsive Expand option.](https://github.com/alvarotrigo/multiscroll.js/wiki/Responsive-Expand-Extension) | ||
|
|
||
| ## Methods | ||
|
|
||
| @@ -287,6 +292,13 @@ $.fn.multiscroll.moveTo('firstSection'); | ||
| $.fn.multiscroll.moveTo(3); | ||
| ``` | ||
|
|
||
| ### setMouseWheelScrolling | ||
| Adds or remove the possibility of scrolling through sections by using mouse wheel (which is active by default). | ||
|
|
||
| ```javascript | ||
| $.fn.multiscroll.setMouseWheelScrolling(false); | ||
| ``` | ||
|
|
||
| ### setKeyboardScrolling | ||
| Adds or remove the possibility of scrolling through sections by using the keyboard arrow keys (which is active by default). | ||
|
|
||
| @@ -360,7 +372,7 @@ Example: | ||
|
|
||
| ```javascript | ||
| $('#multiscroll').multiscroll({ | ||
| onLeave: function(index, direction){ | ||
| onLeave: function(index, nextIndex, direction){ | ||
| //after leaving section 2 | ||
| if(index == '2' && direction =='down'){ | ||
| alert("Going to section 3!"); | ||
| @@ -416,14 +428,27 @@ Want to build multiscroll.js distribution files? Please see [Build Tasks](https: | ||
| - [Wordpress theme](https://goo.gl/kaTYZb) | ||
|
|
||
| ## Who is using multiscroll.js | ||
| If you want your page to be listed here. Please <a href="mailto:alvaro@alvarotrigo.com">contact me</a> with the URL | ||
| If you want your page to be listed here. Please <a href="mailto:alvaro@alvarotrigo.com">contact me</a> with the URL. | ||
|
|
||
| - http://homecoming.nust.edu.pk/ | ||
| - http://www.lob.com.mx/primavera15 | ||
| - http://www.proviotic.com/ | ||
| - http://noisacco.fr/mumm/#first | ||
| - http://designova.net/reflex/index07.html | ||
| - [Themify](https://goo.gl/kaTYZb) | ||
| - http://designova.net/reflex/index07.html | ||
| - https://www.genscher.com | ||
| - http://betterhr.de | ||
| - https://www.kurasino.co.jp | ||
| - http://www.lhaulhaumaria.com | ||
| - https://thewastedhour.com | ||
| - http://restaurant-eveil.com | ||
| - https://www.tischlerei-clemens.de/tischlerei.html | ||
| - http://www.ateliers-romeo.com | ||
| - https://buerobinder.de | ||
| - https://www.blancacre.com | ||
| - http://caporasosrls.com | ||
| - https://www.epic.ch/de/home | ||
| - https://www.paulsbuero.com | ||
| - http://ruiferraodev.net | ||
| - http://lucasfleischer.com | ||
| - https://quintushortus.com/pages/le-concept | ||
|
|
||
|
|
||
| ## Donations | ||
| Donations would be more than welcome :) | ||
| @@ -1,6 +1,6 @@ | ||
| { | ||
| "name": "multiscroll.js", | ||
| "version": "0.1.7", | ||
| "version": "0.2.2", | ||
| "homepage": "http://alvarotrigo.com/multiScroll/", | ||
| "authors": [ | ||
| "Alvaro Trigo https://github.com/alvarotrigo" | ||
| @@ -1,5 +1,5 @@ | ||
| /*! | ||
| * multiscroll.js 0.1.7 Beta | ||
| * multiscroll.js 0.2.2 | ||
| * https://github.com/alvarotrigo/multiscroll.js | ||
| * @license MIT licensed | ||
| * | ||
| @@ -8,8 +8,8 @@ | ||
| html, body { | ||
| margin: 0; | ||
| padding: 0; | ||
| overflow:hidden; | ||
| -webkit-tap-highlight-color: rgba(0,0,0,0); | ||
| overflow:hidden; | ||
| -webkit-tap-highlight-color: rgba(0,0,0,0); | ||
| } | ||
| .ms-section { | ||
| position: relative; | ||
| @@ -97,3 +97,16 @@ html, body { | ||
| .multiscroll-tooltip.left { | ||
| left: 20px; | ||
| } | ||
| .ms-responsive .ms-hide{ | ||
| display: none; | ||
| } | ||
| .ms-scrollable { | ||
| overflow: hidden; | ||
| position: relative; | ||
| } | ||
| .ms-scroller{ | ||
| overflow: hidden; | ||
| } | ||
| .iScrollIndicator{ | ||
| border: 0 !important; | ||
| } | ||
Oops, something went wrong.