Skip to content
This repository

"Offset" support #7

Open
wants to merge 1 commit into from

6 participants

Alex King Daniel Lohse Thomas Dippel Tim Finley Mark Jones Robert Koritnik
Alex King

Not sure if this would be valuable to you as part of the main codeline or not, but for my needs I wanted to be able to define an "offset" - a buffer by which I wanted to the element being scrolled into view to be away from the edge of the browser.

I've only implemented this in the vertical settings for now (additional option of "offset"), but it would be pretty easy to add to the horizontal as well. If you'd like me to clean it up for you, let me know and I'll give it a shot. If you want to rewrite it in your own hand, that's perfectly fine as well.

I hope this is useful and thanks for the very useful plugin!

Daniel Lohse

Nice, thank you! That was exactly what I was looking for. A offset: center would probably also be useful (scrolling the element so it's vertically centered within the visible area of the screen).

Thomas Dippel
dipth commented

:+1:

Tim Finley

+1 to merging in (and documenting) this!

Mark Jones

Wouldn't offset: middle be more in line with vertical centering?

Tim Finley

For me, this isn't about centering. Rather is it about having a slight buffer so that the scrolled-to-item isn't immediately flush with the edge of the container (making it a hair more visually pleasing).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 1 unique commit by 1 author.

May 06, 2012
Alex King alexkingorg add vertical offset support 4cb1dc6
This page is out of date. Refresh to see the latest.

Showing 2 changed files with 18 additions and 8 deletions. Show diff stats Hide diff stats

  1. +9 6 jquery.scrollintoview.js
  2. +9 2 jquery.scrollintoview.min.js
15 jquery.scrollintoview.js
... ... @@ -1,12 +1,14 @@
1 1 /*!
2 2 * jQuery scrollintoview() plugin and :scrollable selector filter
3 3 *
4   - * Version 1.8 (14 Jul 2011)
  4 + * Version 1.8.a (5 May 2012)
5 5 * Requires jQuery 1.4 or newer
6 6 *
7 7 * Copyright (c) 2011 Robert Koritnik
8 8 * Licensed under the terms of the MIT license
9 9 * http://www.opensource.org/licenses/mit-license.php
  10 + *
  11 + * Modified by Alex King to add vertical offset support.
10 12 */
11 13
12 14 (function ($) {
@@ -20,7 +22,8 @@
20 22
21 23 var settings = {
22 24 duration: "fast",
23   - direction: "both"
  25 + direction: "both",
  26 + offset: 0
24 27 };
25 28
26 29 var rootrx = /^(?:html)$/i;
@@ -112,13 +115,13 @@
112 115 // vertical scroll
113 116 if (options.direction.y === true)
114 117 {
115   - if (rel.top < 0)
  118 + if (rel.top < 0 + options.offset)
116 119 {
117   - animOptions.scrollTop = dim.s.scroll.top + rel.top;
  120 + animOptions.scrollTop = dim.s.scroll.top + rel.top - options.offset;
118 121 }
119   - else if (rel.top > 0 && rel.bottom < 0)
  122 + else if (rel.top > 0 + options.offset && rel.bottom < 0 - options.offset)
120 123 {
121   - animOptions.scrollTop = dim.s.scroll.top + Math.min(rel.top, -rel.bottom);
  124 + animOptions.scrollTop = dim.s.scroll.top + Math.min(rel.top, -rel.bottom + options.offset);
122 125 }
123 126 }
124 127
11 jquery.scrollintoview.min.js
... ... @@ -1,11 +1,18 @@
1 1 /*
2 2 * jQuery scrollintoview() plugin and :scrollable selector filter
3 3 *
4   - * Version 1.8 (14 Jul 2011)
  4 + * Version 1.8.a (5 May 2012)
5 5 * Requires jQuery 1.4 or newer
6 6 *
7 7 * Copyright (c) 2011 Robert Koritnik
8 8 * Licensed under the terms of the MIT license
9 9 * http://www.opensource.org/licenses/mit-license.php
  10 + *
  11 + * Modified by Alex King to add vertical offset support.
10 12 */
11   -(function(f){var c={vertical:{x:false,y:true},horizontal:{x:true,y:false},both:{x:true,y:true},x:{x:true,y:false},y:{x:false,y:true}};var b={duration:"fast",direction:"both"};var e=/^(?:html)$/i;var g=function(k,j){j=j||(document.defaultView&&document.defaultView.getComputedStyle?document.defaultView.getComputedStyle(k,null):k.currentStyle);var i=document.defaultView&&document.defaultView.getComputedStyle?true:false;var h={top:(parseFloat(i?j.borderTopWidth:f.css(k,"borderTopWidth"))||0),left:(parseFloat(i?j.borderLeftWidth:f.css(k,"borderLeftWidth"))||0),bottom:(parseFloat(i?j.borderBottomWidth:f.css(k,"borderBottomWidth"))||0),right:(parseFloat(i?j.borderRightWidth:f.css(k,"borderRightWidth"))||0)};return{top:h.top,left:h.left,bottom:h.bottom,right:h.right,vertical:h.top+h.bottom,horizontal:h.left+h.right}};var d=function(h){var j=f(window);var i=e.test(h[0].nodeName);return{border:i?{top:0,left:0,bottom:0,right:0}:g(h[0]),scroll:{top:(i?j:h).scrollTop(),left:(i?j:h).scrollLeft()},scrollbar:{right:i?0:h.innerWidth()-h[0].clientWidth,bottom:i?0:h.innerHeight()-h[0].clientHeight},rect:(function(){var k=h[0].getBoundingClientRect();return{top:i?0:k.top,left:i?0:k.left,bottom:i?h[0].clientHeight:k.bottom,right:i?h[0].clientWidth:k.right}})()}};f.fn.extend({scrollintoview:function(j){j=f.extend({},b,j);j.direction=c[typeof(j.direction)==="string"&&j.direction.toLowerCase()]||c.both;var n="";if(j.direction.x===true){n="horizontal"}if(j.direction.y===true){n=n?"both":"vertical"}var l=this.eq(0);var i=l.closest(":scrollable("+n+")");if(i.length>0){i=i.eq(0);var m={e:d(l),s:d(i)};var h={top:m.e.rect.top-(m.s.rect.top+m.s.border.top),bottom:m.s.rect.bottom-m.s.border.bottom-m.s.scrollbar.bottom-m.e.rect.bottom,left:m.e.rect.left-(m.s.rect.left+m.s.border.left),right:m.s.rect.right-m.s.border.right-m.s.scrollbar.right-m.e.rect.right};var k={};if(j.direction.y===true){if(h.top<0){k.scrollTop=m.s.scroll.top+h.top}else{if(h.top>0&&h.bottom<0){k.scrollTop=m.s.scroll.top+Math.min(h.top,-h.bottom)}}}if(j.direction.x===true){if(h.left<0){k.scrollLeft=m.s.scroll.left+h.left}else{if(h.left>0&&h.right<0){k.scrollLeft=m.s.scroll.left+Math.min(h.left,-h.right)}}}if(!f.isEmptyObject(k)){if(e.test(i[0].nodeName)){i=f("html,body")}i.animate(k,j.duration).eq(0).queue(function(o){f.isFunction(j.complete)&&j.complete.call(i[0]);o()})}else{f.isFunction(j.complete)&&j.complete.call(i[0])}}return this}});var a={auto:true,scroll:true,visible:false,hidden:false};f.extend(f.expr[":"],{scrollable:function(k,i,n,h){var m=c[typeof(n[3])==="string"&&n[3].toLowerCase()]||c.both;var l=(document.defaultView&&document.defaultView.getComputedStyle?document.defaultView.getComputedStyle(k,null):k.currentStyle);var o={x:a[l.overflowX.toLowerCase()]||false,y:a[l.overflowY.toLowerCase()]||false,isRoot:e.test(k.nodeName)};if(!o.x&&!o.y&&!o.isRoot){return false}var j={height:{scroll:k.scrollHeight,client:k.clientHeight},width:{scroll:k.scrollWidth,client:k.clientWidth},scrollableX:function(){return(o.x||o.isRoot)&&this.width.scroll>this.width.client},scrollableY:function(){return(o.y||o.isRoot)&&this.height.scroll>this.height.client}};return m.y&&j.scrollableY()||m.x&&j.scrollableX()}})})(jQuery);
  13 +(function(f){var k={vertical:{x:!1,y:!0},horizontal:{x:!0,y:!1},both:{x:!0,y:!0},x:{x:!0,y:!1},y:{x:!1,y:!0}},o={duration:"fast",direction:"both",offset:0},l=/^(?:html)$/i,m=function(a){var b=f(window),c=l.test(a[0].nodeName),e;if(c)e={top:0,left:0,bottom:0,right:0};else{var d=a[0],i;i=document.defaultView&&document.defaultView.getComputedStyle?document.defaultView.getComputedStyle(d,null):d.currentStyle;var h=document.defaultView&&document.defaultView.getComputedStyle?!0:!1;e=parseFloat(h?i.borderTopWidth:
  14 +f.css(d,"borderTopWidth"))||0;var g=parseFloat(h?i.borderLeftWidth:f.css(d,"borderLeftWidth"))||0,j=parseFloat(h?i.borderBottomWidth:f.css(d,"borderBottomWidth"))||0,d=parseFloat(h?i.borderRightWidth:f.css(d,"borderRightWidth"))||0;e={top:e,left:g,bottom:j,right:d,vertical:e+j,horizontal:g+d}}b={top:(c?b:a).scrollTop(),left:(c?b:a).scrollLeft()};g={right:c?0:a.innerWidth()-a[0].clientWidth,bottom:c?0:a.innerHeight()-a[0].clientHeight};j=a[0].getBoundingClientRect();return{border:e,scroll:b,scrollbar:g,
  15 +rect:{top:c?0:j.top,left:c?0:j.left,bottom:c?a[0].clientHeight:j.bottom,right:c?a[0].clientWidth:j.right}}};f.fn.extend({scrollintoview:function(a){a=f.extend({},o,a);a.direction=k["string"===typeof a.direction&&a.direction.toLowerCase()]||k.both;var b="";!0===a.direction.x&&(b="horizontal");!0===a.direction.y&&(b=b?"both":"vertical");var c=this.eq(0),e=c.closest(":scrollable("+b+")");if(0<e.length){var e=e.eq(0),d=m(c),b=m(e),c=d.rect.top-(b.rect.top+b.border.top),i=b.rect.bottom-b.border.bottom-
  16 +b.scrollbar.bottom-d.rect.bottom,h=d.rect.left-(b.rect.left+b.border.left),d=b.rect.right-b.border.right-b.scrollbar.right-d.rect.right,g={};!0===a.direction.y&&(c<0+a.offset?g.scrollTop=b.scroll.top+c-a.offset:c>0+a.offset&&i<0-a.offset&&(g.scrollTop=b.scroll.top+Math.min(c,-i+a.offset)));!0===a.direction.x&&(0>h?g.scrollLeft=b.scroll.left+h:0<h&&0>d&&(g.scrollLeft=b.scroll.left+Math.min(h,-d)));f.isEmptyObject(g)?f.isFunction(a.complete)&&a.complete.call(e[0]):(l.test(e[0].nodeName)&&(e=f("html,body")),
  17 +e.animate(g,a.duration).eq(0).queue(function(b){f.isFunction(a.complete)&&a.complete.call(e[0]);b()}))}return this}});var n={auto:!0,scroll:!0,visible:!1,hidden:!1};f.extend(f.expr[":"],{scrollable:function(a,b,c){var b=k["string"===typeof c[3]&&c[3].toLowerCase()]||k.both,c=document.defaultView&&document.defaultView.getComputedStyle?document.defaultView.getComputedStyle(a,null):a.currentStyle,e=n[c.overflowX.toLowerCase()]||!1,d=n[c.overflowY.toLowerCase()]||!1,f=l.test(a.nodeName);if(!e&&!d&&!f)return!1;
  18 +a={height:{scroll:a.scrollHeight,client:a.clientHeight},width:{scroll:a.scrollWidth,client:a.clientWidth},scrollableX:function(){return(e||f)&&this.width.scroll>this.width.client},scrollableY:function(){return(d||f)&&this.height.scroll>this.height.client}};return b.y&&a.scrollableY()||b.x&&a.scrollableX()}})})(jQuery);

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.