Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Support both vertical AND horizontal scrolling #5

Closed
wants to merge 1 commit into from

2 participants

@david-sabata

Hi!

I wanted to use your script, which is awesome, but I was missing a feature to scroll horizontally (carousel style). Sadly the scroll direction was hardcoded, so I extended the script to consider also horizontal movement using the same principle as your original approach.

Thank you for your work ;-)

@balupton balupton referenced this pull request from a commit
@balupton v1.1.0. Closes #2, #3, #5, #6, #7
- v1.1.0, July 2, 2012
	- Added custom offset option
	- Fixed firefox body scroll issue
	- Added horizontal scrolling
	- Closes #2, #3, #5, #6, #7
2629097
@balupton balupton closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on May 31, 2012
  1. @david-sabata
This page is out of date. Refresh to see the latest.
Showing with 12 additions and 6 deletions.
  1. +12 −6 scripts/jquery.scrollto.js
View
18 scripts/jquery.scrollto.js
@@ -70,9 +70,12 @@
$inline.appendTo($container);
// Determine the Offsets
- var startOffset = $inline.offset().top,
- targetOffset = $target.offset().top,
- offsetDifference = targetOffset - startOffset;
+ var vertStartOffset = $inline.offset().left,
+ vertTargetOffset = $target.offset().left,
+ vertOffsetDifference = vertTargetOffset - vertStartOffset,
+ horizStartOffset = $inline.offset().top,
+ horizTargetOffset = $inline.offset().top,
+ horizOffsetDifference = horizTargetOffset - horizStartOffset;
// Reset the Inline Element of the Container
$inline.remove();
@@ -97,7 +100,8 @@
// Perform the Scroll
$container.animate({
- 'scrollTop': offsetDifference+'px'
+ 'scrollLeft': vertOffsetDifference+'px',
+ 'scrollTop': horizOffsetDifference+'px'
}, config.duration, config.easing, callback);
// Return true
@@ -128,7 +132,9 @@
while ( $container.length === 1 && !$container.is('body') && !($container.get(0) === document) ) {
// Check Container
var container = $container.get(0);
- if ( $container.css('overflow-y') !== 'visible' && container.scrollHeight !== container.clientHeight ) {
+ if ( ( $container.css('overflow-x') !== 'visible' && container.scrollWidth !== container.clientWidth ) ||
+ ( $container.css('overflow-y') !== 'visible' && container.scrollHeight !== container.clientHeight )
+ ) {
// Push the Collection
collections.push({
'$container': $container,
@@ -183,4 +189,4 @@
window.console.warn("$.ScrollTo has already been defined...");
}
-})(jQuery);
+})(jQuery);
Something went wrong with that request. Please try again.