Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/scroll element #7

Closed
wants to merge 3 commits into from
Closed

Feature/scroll element #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
90e5d52
add option: scroll relative to element
nahuel-soldevilla Mar 2, 2015
2b24b96
Add scroll element example and fix scrollLeft relative to elem
nahuel-soldevilla Mar 11, 2015
8ca3a47
restore repo name
nahuel-soldevilla Mar 11, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 61 additions & 0 deletions example2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<html>
<head>
<title>scroll-to - smooth javascript element scrolling with requestAnimationFrame</title>
<style>
body {
padding: 50px;
}

ul {
min-width: 1500px;
}

#wrapper {
overflow: auto;
height: 300px;
width: 300px;
}

ul li {
margin: 10px;
padding: 5px;
list-style: none;
display: block;
float: left;
width: 100px;
height: 100px;
border: 1px solid #eee;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="wrapper">
<ul></ul>
</div>
<script src="build/build.js"></script>

<script>
var scroll = require('scroll-to');
var events = require('event');
var ul = document.querySelector('ul');
var wrapper = document.querySelector('#wrapper');

for (var i = 0; i < 500; i++) {
var li = document.createElement('li');
li.textContent = 'item ' + i;
ul.appendChild(li);
}

events.bind(window, 'click', function(e){
var x = e.pageX - wrapper.getBoundingClientRect().left;
var y = e.pageY - wrapper.getBoundingClientRect().top;
console.log('scrolling to (%s, %s)', x, y);
scroll(x, y, {
box: wrapper
});
});
</script>
</body>
</html>
23 changes: 16 additions & 7 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,13 @@ function scrollTo(x, y, options) {
options = options || {};

// start position
var start = scroll();

var start = scroll(options.box);

if (options.box) {
y += options.box.scrollTop || 0;
x += options.box.scrollLeft || 0;
}

// setup tween
var tween = Tween(start)
.ease(options.ease || 'out-circ')
Expand All @@ -33,7 +38,11 @@ function scrollTo(x, y, options) {

// scroll
tween.update(function(o){
window.scrollTo(o.left | 0, o.top | 0);
if (options.box) {
options.box.scrollTop = o.top;
options.box.scrollLeft = o.left;
}
else window.scrollTo(o.left | 0, o.top | 0);
});

// handle end
Expand All @@ -59,8 +68,8 @@ function scrollTo(x, y, options) {
* @api private
*/

function scroll() {
var y = window.pageYOffset || document.documentElement.scrollTop;
var x = window.pageXOffset || document.documentElement.scrollLeft;
function scroll(box) {
var y = (box && box.scrollTop) || this.pageYOffset || document.documentElement.scrollTop;
var x = (box && box.scrollLeft) || this.pageXOffset || document.documentElement.scrollLeft;
return { top: y, left: x };
}
}