fx.scroll.md.svn-base

一款开源强大的javascript控件

Class: Fx.Scroll {#Fx-Scroll}
=============================

滚动元素内部的内容

(前提是元素内容出现了溢出(overflow))

### 备注:

- Fx.Scroll 需要页面使用[标准模式](http://hsivonen.iki.fi/doctype/)的DOCTYPE

### 继承:

- [Fx][]



Fx.Scroll 方法: constructor {#Fx-Scroll:constructor}
------------------------------------------------------

### 语法:

	var myFx = new Fx.Scroll(element[, options]);

### 参数:

1. element - (*mixed*)       元素的id或引用
2. options - (*object*, 可选) [Fx][]的所有可选项, 以及下列可选项: 

### 可选项:

1. offset     - (*object*: 默认为 {'x': 0, 'y': 0}) 包含有x,y值得对象, 代表元素内部滚动的起始位置
2. overflown  - (*array*: 默认为 []) 嵌套的滚动容器元素数组, 参见[Element:getPosition][]方法的详解
3. wheelStops - (*boolean*: 默认为 true) 如果设置为true,则当滚动过程中滚动鼠标滚轮的话, 元素内的滚动操作将停止.

### 返回值:

* (*object*) Fx.Scroll实例

### 示例:

	var myFx = new Fx.Scroll('myElement', {
		offset: {
			'x': 0,
			'y': 100
		}
	}).toTop();

### 备注:

- 如果wheelStops未设置为false, 则Fx.Scroll的滚动效果在鼠标滚轮滚动的时候自动终止.
- Fx.Scroll对于内部未出现溢出的元素无效.


Fx.Scroll 方法: set {#Fx-Scroll:set}
--------------------------------------

立即滚动到指定的x/y坐标(无特效)


### 语法:

	myFx.set(x, y);

### 参数:

1. x - (*integer*) x坐标
2. y - (*integer*) y坐标

### 返回值:

* (*object*) Fx.Scroll实例

### 示例:

	var myElement = $(document.body);
	var myFx = new Fx.Scroll(myElement).set(0, 0.5 * document.body.offsetHeight);



Fx.Scroll 方法: start {#Fx-Scroll:start}
------------------------------------------

立即滚动到指定的x/y坐标(有特效)

### 语法:

	myFx.start(x, y);

### 参数:

1. x - (*integer*) x坐标
2. y - (*integer*) y坐标

### 返回值:

* (*object*) Fx.Scroll实例

### 示例:

	var myElement = $(document.body);
	var myFx = new Fx.Scroll(myElement).start(0, 0.5 * document.body.offsetHeight);

### 备注:

- 不能对负坐标进行滚动



Fx.Scroll 方法: toTop {#Fx-Scroll:toTop}
------------------------------------------

滚动到顶部

### 语法:

	myFx.toTop();

### 返回值:

* (*object*) Fx.Scroll实例

### 示例:

	//向下滚动200像素, 等待1.5秒后再向上返回原处
	var myFx = new Fx.Scroll('myElement', {
		onComplete: function(){
			this.toTop.delay(1500, this);
		}
	}).scrollTo(0, 200).chain(function(){
		this.scrollTo(200, 0);
	});



Fx.Scroll 方法: toBottom {#Fx-Scroll:toBottom}
------------------------------------------------

滚动到底部

### 语法:

	myFx.toBottom();

### 返回值:

* (*object*) Fx.Scroll实例

### 示例:

	//整个浏览器中的内容滚动到最底部, 等待1秒后, 返回最顶部
	var myFx = new Fx.Scroll(window).toBottom().chain(function(){
		this.toTop.delay(1000, this);
	});



Fx.Scroll 方法: toLeft {#Fx-Scroll:toLeft}
--------------------------------------------

滚动到左边

### 语法:

	myFx.toLeft();

### 返回值:

* (*object*) Fx.Scroll实例

### 示例:

	//向右滚动200像素,然后再返回左边
	var myFx = new Fx.Scroll('myElement').scrollTo(200, 0).chain(function(){
		this.toLeft();
	});



Fx.Scroll 方法: toRight {#Fx-Scroll:toRight}
--------------------------------------------

滚动到右边

### 语法:

	myFx.toRight();

### 返回值:

* (*object*) Fx.Scroll实例

### 示例:

	//滚动到右边界, 等待5秒后, 滚动到底部
	var myFx = new Fx.Scroll('myElement', {
		duration: 5000,
		wait: false
	}).toRight();

	myFx.toBottom.delay(2000, myFx);



Fx.Scroll 方法: toElement {#Fx-Scroll:toElement}
--------------------------------------------------

滚动到指定的子元素的位置

### 语法:

	myFx.toElement(el);

### 参数:

1. el - (*mixed*) 子元素的id或引用

### 返回值:

* (*object*) Fx.Scroll实例

### 示例:

	var myFx = new Fx.Scroll(window).toElement('myElement');

### 备注:

- 对于元素定位上的问题, 可参考[Element:getPosition][]



[Fx]: /Fx/Fx
[Fx.Scroll]: #Fx-Scroll
[Element:getPosition]: /Utilities/Dimensions#Element:getPosition