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.

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

Introduce block parameter to allign desination element to viewport #21

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 2 additions & 0 deletions README.markdown
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ $("some_selector").scrollintoview();

And that's it really. This is of course if we use defaults. It also supports some configuration possibilities that should be provided as an `options` object along with the call:

* **block** (default: null) - alignment of the destination element relative to the viewport (start, end)
* **delta** (default: 0) - static gap to be used when scrolling
* **duration** (default: "fast") - specified the same as with jQuery animate function; it can be provided as a string (slow, normal, fast) or a number of milliseconds that specifies animation duration
* **direction** (default: "both") - scrolling can be performed in three different directions:
* **x** or **horizontal**
Expand Down
35 changes: 33 additions & 2 deletions jquery.scrollintoview.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@
};

var settings = {
block: null, // "start" | "end"
delta: 0,
duration: "fast",
direction: "both"
};
Expand Down Expand Up @@ -74,6 +76,8 @@
scrollintoview: function (options) {
/// <summary>Scrolls the first element in the set into view by scrolling its closest scrollable parent.</summary>
/// <param name="options" type="Object">Additional options that can configure scrolling:
/// block (default: null) - alignment destination element realative to the view port ("start" or "end")
/// delta (default: 0) - static addition to scrolling
/// duration (default: "fast") - jQuery animation speed (can be a duration string or number of milliseconds)
/// direction (default: "both") - select possible scrollings ("vertical" or "y", "horizontal" or "x", "both")
/// complete (default: none) - a function to call when scrolling completes (called in context of the DOM element being scrolled)
Expand All @@ -82,6 +86,17 @@

options = $.extend({}, settings, options);
options.direction = converter[typeof (options.direction) === "string" && options.direction.toLowerCase()] || converter.both;
if (typeof (options.delta) === "object") {
$.extend(options.delta, {
x: settings.delta,
y: settings.delta
});
} else {
options.delta = {
x: options.delta,
y: options.delta
};
}

var dirStr = "";
if (options.direction.x === true) dirStr = "horizontal";
Expand Down Expand Up @@ -112,27 +127,43 @@
// vertical scroll
if (options.direction.y === true)
{
if (rel.top < 0)
if ('start' == options.block) {
animOptions.scrollTop = dim.s.scroll.top + rel.top;
}
else if ('end' == options.block) {
animOptions.scrollTop = dim.s.scroll.top + Math.min(rel.top, -rel.bottom);
}
else if (rel.top < 0)
{
animOptions.scrollTop = dim.s.scroll.top + rel.top;
}
else if (rel.top > 0 && rel.bottom < 0)
{
animOptions.scrollTop = dim.s.scroll.top + Math.min(rel.top, -rel.bottom);
}

if (undefined !== animOptions.scrollTop) animOptions.scrollTop += options.delta.y;
}

// horizontal scroll
if (options.direction.x === true)
{
if (rel.left < 0)
if ('start' == options.block) {
animOptions.scrollLeft = dim.s.scroll.left + rel.left;
}
else if ('end' == options.block) {
animOptions.scrollLeft = dim.s.scroll.left + Math.min(rel.left, -rel.right);
}
else if (rel.left < 0)
{
animOptions.scrollLeft = dim.s.scroll.left + rel.left;
}
else if (rel.left > 0 && rel.right < 0)
{
animOptions.scrollLeft = dim.s.scroll.left + Math.min(rel.left, -rel.right);
}

if (undefined !== animOptions.scrollLeft) animOptions.scrollLeft += options.delta.x;
}

// scroll if needed
Expand Down
2 changes: 1 addition & 1 deletion jquery.scrollintoview.min.js

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