baser.scrollEvent.js構想

baser.scrollEvent.js

	baser.event = baser.event || {};
	baser.event._scrollEvents = baser.event._scrollEvents || [];
	baser.event._undevideScrollEvents = baser.event._undevideScrollEvents || [];
	baser.event.scroll = baser.event.scroll || function (baserEventObject, undevide) {


		if (baser.event._scrollEvents.length === 0) {

			// 計算結果をアニメーションフレーム毎にDOMに反映
			var animation = new baser.ui.AnimationFrames(function () {
				// リサイズ時にサイズを計算
				$.each(baser.event._scrollEvents, function (i, scrollEvent) {
					scrollEvent.render();
				});
			});

			baser.ui.Browser.browser.on('scrollstart', function () {
				animation.start();
			}).on('scroll', function () {
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				$.each(baser.event._scrollEvents, function (i, scrollEvent) {
					scrollEvent.data.scrollTop = scrollTop;
					scrollEvent.data.result = scrollEvent.calc.call(scrollEvent);
				});
				$.each(baser.event._undevideScrollEvents, function (i, scrollEvent) {
					scrollEvent.data.scrollTop = scrollTop;
					scrollEvent.data.result = scrollEvent.calc.call(scrollEvent);
					scrollEvent.render();
				});
			}).on('scrollend', function () {
				animation.stop();
			});

			animation.start();
			baser.ui.Timer.wait(300, function () {
				animation.stop();
			});

		}
		baserEventObject.data = $.extend({}, baserEventObject.data, {
			result: undefined,
			scrollTop: null,
			clientWidth: null,
			clientHeight: null,
			scrollWidth: null,
			scrollHeight: null
		});

		if (undevide) {
			baser.event._undevideScrollEvents.push(baserEventObject);
		} else {
			baser.event._scrollEvents.push(baserEventObject);
		}
	};

excute.js

		baser.event.scroll({
			calc: function () {
				return this.data.scrollTop * 0.4;
			},
			render: function () {
				$target.css({
					backgroundPosition: 'center ' + this.data.result + 'px'
				});
			}
		}, true);