--- /dev/null
+/**
+ *
+ * Find more about the scrolling function at
+ * http://cubiq.org/scrolling-div-for-mobile-webkit-turns-3/16
+ *
+ * Copyright (c) 2009 Matteo Spinelli, http://cubiq.org/
+ * Released under MIT license
+ * http://cubiq.org/dropbox/mit-license.txt
+ *
+ * Version 3.1beta1 - Last updated: 2010.05.06
+ *
+ */
+
+function iScroll (el, options) {
+ this.element = typeof el == 'object' ? el : document.getElementById(el);
+ this.wrapper = this.element.parentNode;
+
+ this.wrapper.style.overflow = 'hidden';
+ this.wrapper.style.position = 'relative';
+ this.element.style.webkitTransitionProperty = '-webkit-transform';
+ this.element.style.webkitTransitionTimingFunction = 'cubic-bezier(0,0,0.25,1)';
+ this.element.style.webkitTransitionDuration = '0';
+ this.element.style.webkitTransform = 'translate3d(0,0,0)';
+
+ // Get options
+ this.options = {
+ bounce: true,
+ hScrollBar: true,
+ vScrollBar: true
+ };
+
+ if (typeof options == 'object') {
+ for (var i in options) {
+ this.options[i] = options[i];
+ }
+ }
+
+ this.refresh();
+
+ this.element.addEventListener('touchstart', this);
+ this.element.addEventListener('touchmove', this);
+ this.element.addEventListener('touchend', this);
+ this.element.addEventListener('DOMSubtreeModified', this);
+ window.addEventListener('orientationchange', this);
+}
+
+iScroll.prototype = {
+ _x: 0,
+ _y: 0,
+
+ handleEvent: function (e) {
+ switch (e.type) {
+ case 'touchstart': this.onTouchStart(e); break;
+ case 'touchmove': this.onTouchMove(e); break;
+ case 'touchend': this.onTouchEnd(e); break;
+ case 'webkitTransitionEnd': this.onTransitionEnd(e); break;
+ case 'orientationchange': this.refresh(); /*this.scrollTo(0,0,'0');*/ break;
+ case 'DOMSubtreeModified': this.refresh(); break;
+ }
+ },
+
+ refresh: function () {
+ this.element.style.webkitTransitionDuration = '0';
+ this.scrollWidth = this.wrapper.clientWidth;
+ this.scrollHeight = this.wrapper.clientHeight;
+ this.maxScrollX = this.scrollWidth - this.element.offsetWidth;
+ this.maxScrollY = this.scrollHeight - this.element.offsetHeight;
+
+ var resetX = this.x, resetY = this.y;
+ if (this.scrollX && this.x < this.maxScrollX) {
+ resetX = this.maxScrollX;
+ }
+ if (this.scrollY && this.y < this.maxScrollY) {
+ resetY = this.maxScrollY;
+ }
+ // If content width/lenght has been modified, reset scroller position
+ this.scrollTo(resetX,resetY,'0');
+
+ this.scrollX = this.element.offsetWidth > this.scrollWidth ? true : false;
+ this.scrollY = this.element.offsetHeight > this.scrollHeight ? true : false;
+
+ // Update horizontal scrollbar
+ if (this.options.hScrollBar && this.scrollX) {
+ this.scrollBarX = new scrollbar('horizontal', this.wrapper);
+ this.scrollBarX.init(this.scrollWidth, this.element.offsetWidth);
+ } else if (this.scrollBarX) {
+ this.scrollBarX = this.scrollBarX.remove();
+ }
+
+ // Update vertical scrollbar
+ if (this.options.vScrollBar && this.scrollY) {
+ this.scrollBarY = new scrollbar('vertical', this.wrapper);
+ this.scrollBarY.init(this.scrollHeight, this.element.offsetHeight);
+ } else if (this.scrollBarY) {
+ this.scrollBarY = this.scrollBarY.remove();
+ }
+ },
+
+ get x() {
+ return this._x;
+ },
+
+ get y() {
+ return this._y;
+ },
+
+ setPosition: function (x, y) {
+ this._x = x !== null ? x : this._x;
+ this._y = y !== null ? y : this._y;
+
+ this.element.style.webkitTransform = 'translate3d(' + this._x + 'px,' + this._y + 'px,0)';
+
+ // Move the scrollbars
+ if (this.scrollBarX) {
+ this.scrollBarX.setPosition(this.scrollBarX.maxScroll / this.maxScrollX * this._x);
+ }
+ if (this.scrollBarY) {
+ this.scrollBarY.setPosition(this.scrollBarY.maxScroll / this.maxScrollY * this._y);
+ }
+ },
+
+ onTouchStart: function(e) {
+ if (e.targetTouches.length != 1) {
+ return false;
+ }
+
+ e.preventDefault();
+ e.stopPropagation();
+
+ this.element.style.webkitTransitionDuration = '0';
+
+ if (this.scrollBarX) {
+ this.scrollBarX.bar.style.webkitTransitionDuration = '0, 250ms';
+ }
+ if (this.scrollBarY) {
+ this.scrollBarY.bar.style.webkitTransitionDuration = '0, 250ms';
+ }
+
+ // Check if elem is really where it should be
+ var theTransform = new WebKitCSSMatrix(window.getComputedStyle(this.element).webkitTransform);
+ if (theTransform.m41 != this.x || theTransform.m42 != this.y) {
+ this.setPosition(theTransform.m41, theTransform.m42);
+ }
+
+ this.touchStartX = e.touches[0].pageX;
+ this.scrollStartX = this.x;
+
+ this.touchStartY = e.touches[0].pageY;
+ this.scrollStartY = this.y;
+
+ this.scrollStartTime = e.timeStamp;
+ this.moved = false;
+ },
+
+ onTouchMove: function(e) {
+ if (e.targetTouches.length != 1) {
+ return false;
+ }
+
+ var leftDelta = this.scrollX === true ? e.touches[0].pageX - this.touchStartX : 0;
+ var topDelta = this.scrollY === true ? e.touches[0].pageY - this.touchStartY : 0;
+
+ if (this.x > 0 || this.x < this.maxScrollX) {
+ leftDelta = Math.round(leftDelta / 4); // Slow down if outside of the boundaries
+ }
+
+ if (this.y > 0 || this.y < this.maxScrollY) {
+ topDelta = Math.round(topDelta / 4); // Slow down if outside of the boundaries
+ }
+
+ if (this.scrollBarX && !this.scrollBarX.visible) {
+ this.scrollBarX.show();
+ }
+ if (this.scrollBarY && !this.scrollBarY.visible) {
+ this.scrollBarY.show();
+ }
+
+ this.setPosition(this.x + leftDelta, this.y + topDelta);
+
+ this.touchStartX = e.touches[0].pageX;
+ this.touchStartY = e.touches[0].pageY;
+ this.moved = true;
+
+ // Prevent slingshot effect
+ if( e.timeStamp-this.scrollStartTime > 250 ) {
+ this.scrollStartX = this.x;
+ this.scrollStartY = this.y;
+ this.scrollStartTime = e.timeStamp;
+ }
+ },
+
+ onTouchEnd: function(e) {
+ if (e.targetTouches.length > 0) {
+ return false;
+ }
+
+ if (!this.moved) {
+ var theEvent = document.createEvent('MouseEvents');
+ theEvent.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, null);
+ e.changedTouches[0].target.dispatchEvent(theEvent);
+ return false;
+ }
+
+ var time = e.timeStamp - this.scrollStartTime;
+
+ var momentumX = this.scrollX === true
+ ? this.momentum(this.x - this.scrollStartX,
+ time,
+ -this.x + 50,
+ this.x + this.element.offsetWidth - this.scrollWidth + 50)
+ : { dist: 0, time: 0 };
+
+ var momentumY = this.scrollY === true
+ ? this.momentum(this.y - this.scrollStartY,
+ time,
+ -this.y + /*this.scrollHeight/3*/ 50,
+ this.y + this.element.offsetHeight - this.scrollHeight + /*this.scrollHeight/3*/ 50)
+ : { dist: 0, time: 0 };
+
+ if (!momentumX.dist && !momentumY.dist) {
+ this.onTransitionEnd(); // I know, I know... This is lame
+ return false;
+ }
+
+ var newDuration = Math.max(momentumX.time, momentumY.time);
+ var newPositionX = this.x + momentumX.dist;
+ var newPositionY = this.y + momentumY.dist;
+
+ this.element.addEventListener('webkitTransitionEnd', this);
+
+ this.scrollTo(newPositionX, newPositionY, newDuration + 'ms');
+
+ // Move the scrollbars
+ if (this.scrollBarX) {
+ this.scrollBarX.scrollTo(this.scrollBarX.maxScroll / this.maxScrollX * newPositionX, newDuration + 'ms');
+ }
+ if (this.scrollBarY) {
+ this.scrollBarY.scrollTo(this.scrollBarY.maxScroll / this.maxScrollY * newPositionY, newDuration + 'ms');
+ }
+ },
+
+ onTransitionEnd: function () {
+ this.element.removeEventListener('webkitTransitionEnd', this);
+ this.resetPosition();
+
+ // Hide the scrollbars
+ if (this.scrollBarX) {
+ this.scrollBarX.hide();
+ }
+ if (this.scrollBarY) {
+ this.scrollBarY.hide();
+ }
+ },
+
+ resetPosition: function () {
+ var resetX = resetY = null;
+ if (this.x > 0 || this.x < this.maxScrollX) {
+ resetX = this.x >= 0 ? 0 : this.maxScrollX;
+ }
+
+ if (this.y > 0 || this.y < this.maxScrollY) {
+ resetY = this.y >= 0 ? 0 : this.maxScrollY;
+ }
+
+ if (resetX !== null || resetY !== null) {
+ this.scrollTo(resetX, resetY, '500ms');
+
+ if (this.scrollBarX) {
+ this.scrollBarX.scrollTo(this.scrollBarX.maxScroll / this.maxScrollX * (resetX || this.x), '500ms');
+ }
+ if (this.scrollBarY) {
+ this.scrollBarY.scrollTo(this.scrollBarY.maxScroll / this.maxScrollY * (resetY || this.y), '500ms');
+ }
+ }
+ },
+
+ scrollTo: function (destX, destY, runtime) {
+ this.element.style.webkitTransitionDuration = runtime || '400ms';
+ this.setPosition(destX, destY);
+ },
+
+ momentum: function (dist, time, maxDist1, maxDist2) {
+ friction = 0.1;
+ deceleration = 1.5;
+
+ var speed = Math.abs(dist) / time * 1000;
+ var newDist = speed * speed / (20 * friction) / 1000;
+
+ // Proportinally reduce speed if we are outside of the boundaries
+ if (dist > 0 && maxDist1 !== undefined && newDist > maxDist1) {
+ speed = speed * maxDist1 / newDist;
+ newDist = maxDist1;
+ }
+ if (dist < 0 && maxDist2 !== undefined && newDist > maxDist2) {
+ speed = speed * maxDist2 / newDist;
+ newDist = maxDist2;
+ }
+
+ newDist = newDist * (dist < 0 ? -1 : 1);
+
+ var newTime = -speed / -deceleration;
+ if (newTime < 1) { // We can't go back in time
+ newTime = 1;
+ }
+
+ return { dist: Math.round(newDist), time: Math.round(newTime) };
+ }
+};
+
+var scrollbar = function (dir, wrapper) {
+ this.dir = dir;
+ this.bar = document.createElement('div');
+ this.bar.className = 'scrollbar ' + dir;
+ this.bar.style.webkitTransitionTimingFunction = 'cubic-bezier(0,0,0.25,1)';
+ this.bar.style.webkitTransform = 'translate3d(0,0,0)';
+ this.bar.style.webkitTransitionProperty = '-webkit-transform,opacity';
+ this.bar.style.webkitTransitionDuration = '0,250ms';
+ this.bar.style.pointerEvents = 'none';
+ this.bar.style.opacity = '0';
+
+ wrapper.appendChild(this.bar);
+}
+
+scrollbar.prototype = {
+ size: 0,
+ maxSize: 0,
+ maxScroll: 0,
+ visible: false,
+
+ init: function (scroll, size) {
+ var offset = this.dir == 'horizontal' ? this.bar.offsetWidth - this.bar.clientWidth : this.bar.offsetHeight - this.bar.clientHeight;
+ this.maxSize = scroll - 8; // 8 = distance from top + distance from bottom
+ this.size = Math.round(this.maxSize * this.maxSize / size) + offset;
+ this.maxScroll = this.maxSize - this.size;
+ this.bar.style[this.dir == 'horizontal' ? 'width' : 'height'] = (this.size - offset) + 'px';
+ },
+
+ setPosition: function (pos) {
+ if (pos < 0) {
+ pos = 0;
+ } else if (pos > this.maxScroll) {
+ pos = this.maxScroll;
+ }
+
+ pos = this.dir == 'horizontal' ? 'translate3d(' + Math.round(pos) + 'px,0,0)' : 'translate3d(0,' + Math.round(pos) + 'px,0)';
+ this.bar.style.webkitTransform = pos;
+ },
+
+ scrollTo: function (pos, runtime) {
+ this.bar.style.webkitTransitionDuration = (runtime || '400ms') + ',250ms';
+ this.setPosition(pos);
+ },
+
+ show: function () {
+ this.visible = true;
+ this.bar.style.opacity = '1';
+ },
+
+ hide: function () {
+ this.visible = false;
+ this.bar.style.opacity = '0';
+ },
+
+ remove: function () {
+ this.bar.parentNode.removeChild(this.bar);
+ return null;
+ }
+};
OSDN Git Service
