Jun 18 2009

Window.scrollTo Fails Under OVERFLOW-Y: auto Style.

I was trying to subclass a Web Treeview control for my own evil purposes and ran into a sticky problem - scrollTo not working! Just for background, my evil purpose was to replace the Infragistics ultra web tree control, since we only use about 5% of the functionality, but pay the full price of upgrades and page size for the other 95%.

anyway, all was going well, until I tried to implement the ScrollTo functionality.

My first pass looked something like this:

[javascript]
<Script Type="text/javascript">
<!–
var ele = document.getElementById(nodeID);
window.scrollTo(ele.parentElement.offsetParent.offsetLeft ,ele.parentElement.offsetParent.offsetTop);
//–>
</Script>
[/javascript]

Now this worked great in my sample text page, but when I dropped it into the main application page, it didn’t do a damn thing. What gives?

Well, I traced the problem down to a style tag on the wrapping div tag:

[css]
OVERFLOW-Y: auto;
[/css]

It seems that the auto setting disallowed my scrolling to a specific x,y coordinate when that coordinate was outside the visible space.

That really stunk because I didn’t have the ability to modify the existing container page, beyond replacing the Infragistics control tag.

Luckily, I found a workaround:

[javascript]
<Script Type="text/javascript">
<!–
var ele = document.getElementById(nodeID);
ele.scrollIntoView();
//–>
</Script>
[/javascript]

Not only does this work within the CSS overflow directive, but it’s also a bit more elegant since I no longer have to worry about all that parent offset nonsense. :)

Blog Traffic Exchange Related Posts Blog Traffic Exchange Related Websites
  • Essentials Of Web Application Development – A Brief One of the important phases of the web application development plan is to choose the correct platform for the development of the web based applications. There are mainly 5 phases in the web development process which are: Gathering the needs and requirements of the company and analyzing them. Doing the......
  • Optimizing Title Tags For Success Properly optimizing the title tag (or more appropriately, the HTML title element) of a web page can yield big benefits from a search engine optimization (SEO) perspective. The following document explains why titles are so important and provides useful tips on how to optimize a title tag.Title tags are......
  • SEO Report Overview Below is an overview of what is contained in our affordable SEO Report. If you would like to see a sample of this report that was run using our web site and specific keywords as well as search engine, please click on SEO Report Sample. Report Overview This section contains......
  • Optimizing Title Tags For Success Properly optimizing the title tag (or more appropriately, the HTML title element) of a web page can yield big benefits from a search engine optimization (SEO) perspective. The following document explains why titles are so important and provides useful tips on how to optimize a title tag.Title tags are......
  • Simple Tips for a Popular Blog Blogs are, hands down, one of the easiest possible ways for you to publish your thoughts or messages on the internet. Blogs are excellent for spiking search engine enthusiasm, meaning that by writing in a blog you can easily attract plenty of traffic. But are you aware of what you......