'Kinetic' scrolling with greasemonkey (javascript) - maemo.org

Active Topics

Camera phone competition March 2023 "Endless" (35)
to General by Maemish - 5 hrs, 16 mins ago
TLS 1.2 for N9 is ready (28)
to MeeGo / Harmattan by smartblu9 - 6 hrs, 30 mins ago
Maemo repository (3)
to Community by torsen - 21 hrs, 59 mins ago
Error after installing Leste on sdcard (11)
to Maemo 7 / Leste by Maemish - 1 day, 19 hrs ago
Introducing ubiboot N9 (multiboot OS loader) (1,393)
to Alternatives by smatkovi - 3 days, 2 hrs ago
more...

Thread Tools

binauralbeat	2008-04-11 , 15:59
Posts: 2 \| Thanked: 7 times \| Joined on Apr 2008	#1

I know...touchy subject for some, but I thought I should pass this on for anyone interested.

Here is a rough Greasemonkey script I've written for 'kinetic' scrolling for MicroB. It needs some tweaking, but it works! Let me know what you think.

-Broc

Code:

var TIME_THRESHOLD = 500;
var MAX_VELOCITY = 5000;

var scrollBy;
var sintv;
var startY = 0;
var endY = 0;
var startTime;
var endTime;
var timeScrolled;
var distanceScrolled;
var velocity;
var direction;


var intervalCount = 0;

function setStartY(e){
	stopScroll();
	startY = e.pageY;
	startTime = new Date();
}

function startScroll(e){
	stopScroll();
	endY = e.pageY;
	endTime = new Date();
	if(e.pageX < 700){  // 700 should be innerwidth of window ... change me
		Scroll(startY, endY, startTime, endTime);
	}
}


function Scroll(stY,enY,stTime,enTime){

	timeScrolled = (enTime.getSeconds()+ enTime.getMilliseconds()/1000) - 

(stTime.getSeconds()+stTime.getMilliseconds()/1000);

	

	if(timeScrolled < TIME_THRESHOLD){

		distanceScrolled = Math.abs(enY - stY);

		velocity = (distanceScrolled / timeScrolled);

		if(velocity > MAX_VELOCITY){
			velocity = MAX_VELOCITY;
		}

		
		//get direction
		if(enY > stY){
			direction = -1;
		}else{
			direction = 1;
		}

		sintv = setInterval(scrollIt, 10);
		
	}
}

function scrollIt(){

	intervalCount +=1;

	var cseconds = 1+intervalCount/100;

	scrollBy = (velocity*0.098)/(cseconds*cseconds);

	if(scrollBy > 2){
		window.scrollBy(0,parseInt(scrollBy * direction));
	}else{
		stopScroll();
	}
	
}

function stopScroll(){
	
	direction = 0;
	velocity = 0;
	intervalCount = 0;
	distanceToScroll = 0;
	clearInterval(sintv);
}

document.addEventListener('mousedown', setStartY, false);
document.addEventListener('mouseup', startScroll, false);

Last edited by binauralbeat; 2008-04-11 at 16:18.

Quote & Reply |

The Following 7 Users Say Thank You to binauralbeat For This Useful Post:
Benson, brontide, netss, qwerty12, spiros, t24, tarkam

	Benson	2008-04-11 , 16:41
	Posts: 4,930 \| Thanked: 2,272 times \| Joined on Oct 2007	#2

Main problem I see (looking at the code, I haven't even downloaded it yet) is that it seems to go off the average speed of a given drag; that means that dragging for a specific distance (drag, hesitate at the end, and then release) will send it flying anyway, if it's less than the threshold, while deliberately dragging up to finish this paragraph, then flicking down to get back to the top, will exceed the threshold and not get kinetized.

I think monitoring the speed at the end of the drag is really what we need.

I don't know any javascript, but it seems the setInterval and clearInterval are essentially timer-triggering a method? Perhaps if, instead of setStartY, we had something like:

Code:

function startSpeedTracking(e) {
  stopScroll();
  oldY = e.pageY;
  tintv = setInterval(speedTracker, 50);
}

function speedTracker() {
  //Somehow get current coords? Stuffing the new y in newY...
  velocity = (newY - oldY)/50;
  oldY = newY;
}

function startScroll(e) {
  clearInterval(tintv);
  if(velocity > 0){
    direction = -1;
  }else{
    direction = 1;
  }
  velocity = Math.abs(velocity);

  //Rest of stuff unchanged...
  //Maybe threshold off velocity, instead of time?
}

I'd give it a shot, but I've no clue how to get the cursor position in mid-drag...

Quote & Reply |

	Benson	2008-04-11 , 16:51
	Posts: 4,930 \| Thanked: 2,272 times \| Joined on Oct 2007	#3

Wait a sec, I think I'm already understanding something; Microb's scrolling doesn't happen, does it, because we grabbed the mouse-down? So, something to scroll the page should also be added in speedTracker... If someone can point me at how to get the mouse position without an event, I'll try to go away and come back when I have something working...

Quote & Reply |

	Bundyo	2008-04-11 , 17:01
	Posts: 4,708 \| Thanked: 4,649 times \| Joined on Oct 2007 @ Bulgaria	#4

I already tried doing kinetic scrolling for one of my projects and it seems MicroB's javascript is too slow for this. But keep trying, mine was largely unoptimized.

Why without an event?

Code:

<body onmousemove="console.log(event.screenX)">

That will show you in FF FB horizontal coordinate of the mouse cursor...

If we had a mousemove

We have during drag

Last edited by Bundyo; 2008-04-11 at 17:05.

Quote & Reply |

The Following User Says Thank You to Bundyo For This Useful Post:
Benson

	Benson	2008-04-11 , 17:23
	Posts: 4,930 \| Thanked: 2,272 times \| Joined on Oct 2007	#5

I'd think the overhead of tracking every move would be bad... Oh, well, it's something, and that's better than nothing. I shall try it.

Quote & Reply |

tarkam	2008-04-11 , 17:26
Posts: 17 \| Thanked: 10 times \| Joined on Mar 2008 @ Guatemala City, Guatemala	#6

It works pretty good on "small" websites. On heavily coded sites it tends to go crazy. With finger scrolling you have to do small swipes or otherwise it went the opposite direction!

Anyway I think it's a good start and would love to see more development on this script.

Quote & Reply |

	Bundyo	2008-04-11 , 17:27
	Posts: 4,708 \| Thanked: 4,649 times \| Joined on Oct 2007 @ Bulgaria	#7

I don't think you need to track the drag, maybe just the start point, the end point and the speed of getting there?

Quote & Reply |

	Benson	2008-04-11 , 17:59
	Posts: 4,930 \| Thanked: 2,272 times \| Joined on Oct 2007	#8

The trouble is, if you make a fast drag for 2 inches, then want it to stop, the norma behavior is to drag, pause at the end, and then take your finger off. If you just track the average speed, you won't see that stop at the end, just a slower average speed. That's cured in binaural's script with a threshold, so if the drag took more than 0.5 sec, it doesn't kineticize. But that results in the opposite; a long drag ending with a flick now won't have the flick recognized.
So I need some way of determining the speed at release. The only obvious way is to track speed continuously (at 20 Hz, I was guessing, though that's tunable) and discard all but the last datum.