I will try to give you some ideas without real code, since I logged only for second :)
1., you could store your data range in one or two variables, e.g. var startYear = 2009;, then hide years you drew with all those date (i hope you understand :D) add one absolute div to show current year, which you'll recalculate on each mousemove.
If you know, that there are three years on timeline and you know that offsetLeft (example) is in range (0; 1/3 of timeline div width), than you know, that year that user is looking upon is the lowest and can draw it with something like $('year-in-view').html('<b>'+startYear+'</b>');
2., you could store previous position (yet again :) ) in some variable and check if the X-axis difference is bigger than 100px (or 200px... your choice) and if yes (abs(current.x-last.x) > 100), animate the div differently, so user will understand that he moved through two years.
Hope it helps, Adam