forked from joelambert/ScrollFix
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
121 additions
and
42 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
# This file is for unifying the coding style for different editors and IDEs | ||
# editorconfig.org | ||
|
||
root = true | ||
|
||
[*] | ||
charset = utf-8 | ||
indent_style = tab | ||
end_of_line = lf | ||
insert_final_newline = true | ||
trim_trailing_whitespace = true | ||
|
||
[{package,bower}.json] | ||
indent_style = space | ||
indent_size = 2 | ||
|
||
[*.{html}] | ||
quote_type = double | ||
|
||
[*.md] | ||
# use `<br>` to insert a line break explicitly. | ||
; trim_trailing_whitespace = false |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
Thumbs.db | ||
ehthumbs.db | ||
[Dd]esktop.ini | ||
$RECYCLE.BIN/ | ||
.DS_Store | ||
.klive | ||
.dropbox.cache | ||
|
||
*.tmp | ||
*.bak | ||
*.swp | ||
*.lnk | ||
|
||
.svn | ||
.idea | ||
|
||
node_modules/ | ||
bower_components/ | ||
npm-debug.log | ||
|
||
*.zip | ||
*.gz |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
* | ||
|
||
!package.json | ||
!README.md | ||
!src/**/*.* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,42 +1,52 @@ | ||
# ScrollFix | ||
|
||
ScrollFix is a small script that *partially* works around the most common issue with using iOS5's `overflow: scroll` for fullscreen web apps. | ||
|
||
The newly support `overflow:scroll` is a great addition and works well except under the following conditions: | ||
|
||
- The scroll area is at the top and the user tries to scroll up | ||
- The scroll area is at the bottom and the user tries to scroll down. | ||
|
||
In a native app, you'd expect the content to rubber band but in Safari the whole page is scrolled instead. Under occasions where you've deliberately hidden the browser chrome, this interaction can bring it back into view. | ||
|
||
ScrollFix works around this by manually offsetting the `scrollTop` value to one away from the limit at either extreme, which causes the browser to use rubber banding rather than passing the event up the DOM tree. | ||
|
||
# How to use | ||
|
||
Setup a scrollable section: | ||
|
||
<div class="scrollable" id="scrollable"> | ||
<ul> | ||
<li>List Item</li> | ||
<li>List Item</li> | ||
<li>List Item</li> | ||
<li>List Item</li> | ||
<li>List Item</li> | ||
<li>List Item</li> | ||
</ul> | ||
</div> | ||
|
||
Then call the following code on the area that has the `overflow: scroll` property: | ||
|
||
var scrollable = document.getElementById("scrollable"); | ||
new ScrollFix(scrollable); | ||
|
||
# Known Issues | ||
|
||
ScrollFix doesn't prevent the page from being scrolled when if a touch is registered whilst the scrolling section is bouncing (rubber banding). This is an issue I don't think can be worked around with the current implementation of iOS5's `overflow: scroll`. | ||
|
||
[This ticket](https://github.com/joelambert/ScrollFix/issues/1#issuecomment-2421225) better explains the issue, Apple are aware of the problem (thanks to [Matteo Spinelli](http://www.twitter.com/cubiq)), hopefully this will be resolved in iOS 5.1. | ||
|
||
# License | ||
|
||
ScrollFix is Copyright © 2011-2013 [Joe Lambert](http://www.joelambert.co.uk) and is licensed under the terms of the [MIT License](http://www.opensource.org/licenses/mit-license.php). | ||
# Scroll Box | ||
|
||
> Lightweight solution for scrolling content on mobile device. | ||
> Inspired by [ScrollFix](https://github.com/joelambert/ScrollFix). | ||
ScrollFix's original documentation is below (probably not applicable to this project): | ||
|
||
*** | ||
|
||
> ### ScrollFix | ||
> | ||
> ScrollFix is a small script that *partially* works around the most common issue with using iOS5's `overflow: scroll` for fullscreen web apps. | ||
> | ||
> The newly support `overflow:scroll` is a great addition and works well except under the following conditions: | ||
> | ||
> - The scroll area is at the top and the user tries to scroll up | ||
> - The scroll area is at the bottom and the user tries to scroll down. | ||
> | ||
> In a native app, you'd expect the content to rubber band but in Safari the whole page is scrolled instead. Under occasions where you've deliberately hidden the browser chrome, this interaction can bring it back into view. | ||
> | ||
> ScrollFix works around this by manually offsetting the `scrollTop` value to one away from the limit at either extreme, which causes the browser to use rubber banding rather than passing the event up the DOM tree. | ||
> | ||
> ### How to use | ||
> | ||
> Setup a scrollable section: | ||
> | ||
> ```html | ||
> <div class="scrollable" id="scrollable"> | ||
> <ul> | ||
> <li>List Item</li> | ||
> <li>List Item</li> | ||
> <li>List Item</li> | ||
> <li>List Item</li> | ||
> <li>List Item</li> | ||
> <li>List Item</li> | ||
> </ul> | ||
> </div> | ||
> ``` | ||
> | ||
> Then call the following code on the area that has the `overflow: scroll` property: | ||
> | ||
> ```js | ||
> var scrollable = document.getElementById("scrollable"); | ||
> new ScrollFix(scrollable); | ||
> ``` | ||
*** | ||
## License | ||
[MIT License](http://www.opensource.org/licenses/mit-license.php) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
{ | ||
"name": "scroll-box", | ||
"version": "0.2.0-alpha.1", | ||
"homepage": "https://github.com/CMUI/scroll-box", | ||
"author": "cssmagic <cssmagic.cn@gmail.com>", | ||
"description": "Lightweight solution for scrolling content on mobile device.", | ||
"license": "MIT", | ||
"keywords": [ | ||
"overflow", | ||
"scroll", | ||
"touch", | ||
"mobile" | ||
], | ||
"main": "./src/scroll-box.js", | ||
"scripts": { | ||
"test": "echo \"Error: no test specified\" && exit 1" | ||
}, | ||
"dependencies": {}, | ||
"devDependencies": {} | ||
} |