Auto-scroll when out of viewport (option)

README.md

@@ -62,6 +62,7 @@ Docs
 - **showText**: If `TRUE` (default) keeps text in the dropdown menu.
 - **showImages**: If `TRUE` (default) show images in the dropdown menu.
 - **className**: A class name for CSS styling, default `'fancy-select'`.
+- **autoScrollWindow**: If `TRUE`, auto-scroll browser window when FancySelect is out of viewport.
 - **animateFade**: If `TRUE` (default) animate the dropdown menu appearance.
 - **fx**: An object for additional `Fx` options (default `{'duration': 'short'}`).
 

Source/FancySelect.js

@@ -24,19 +24,30 @@ var FancySelect = new Class({
 		showImages: true,
 		className: 'fancy-select',
 		offset: { x: 0, y: 0 },
+		autoScrollWindow: false,
 		animateFade: true,
 		animateSlide: true,
 		fx: { 'duration': 'short' }
 	},
 
 	initialize: function(element, options) {
+
 		this.setOptions(options);
 		/*if (!Fx.Slide)*/ this.options.animateSlide = false; // Need review
 		this.element = document.id(element);
 		this.element.store('fancyselect_object', this);
 		this._create();
 		this.attach();
+
+		// Auto-scroll when FancySelect is out of viewport
+		if (this.options.autoScrollWindow) this.addEvent('show', function() {
+			var windowScroll = window.getScroll();
+			var overflow = this.ul.getPosition().y + this.ul.getSize().y - window.getSize().y - windowScroll.y;
+			if (overflow > 0) window.scrollTo(windowScroll.x, windowScroll.y + overflow + 10);
+		});
+
 		return this;
+
 	},
 
 	attach: function() {