Brennan’s Blog

I have recently become a fan of the ability to make a section of a web page to scroll using the overflow rule in CSS. (overflow?) But the problem is that sometimes you need to have an item in the scroll area to be visible which means you must slide the scrollbar down to the item. Making this work was something that eluded me until one of my co-workers pointed me to a comment on Telerik.com. Their example is pretty complicated and I do not understand what all of the complex math is about when all you need to know is the two values, the current and destination positions, in order to move the scrollbar. I simplified it with the following example.

Now I am able to move forward with some concepts I have for enhancing some applications with AJAX functionality. I have already created some interesting sample screens that make use of the web services as Javascript objects which is possible with the ScriptResource attribute which is a part of the ASP.NET AJAX framework. Using it automatically pushes the data around using JSON serialization. It is amazingly fast when compared to using the UpdatePanel.

You can try out a working example below. It should be easy enough to integrate with any web application. For ASP.NET you simply have to pass in the ClientID value for the controls since those are represented by the ID value in the markup of the web page that is used by the Javascript/DOM to move the scrollbar. Move the scrollbar and click the links to the right to see what happens. The numbers are updated when the scrollbar is moved. It should help you understand how it works.