Behavior Version

Creating a behavior version is often even easier than creating a regular version. One
of the reason is that it is easier to initialize and the second is that it allows you
to have setters and getters for properties. And of course behaviors are way more
easier to reuse than non encapsulated scripts.

Defining Properties

I wanted two properties and I decided to call them syncTo and syncDirection.
Both have the type String and syncTo should be assigned the id of the component that you want to sync to.
Notice that you should not do forward referencing because the target might not have been loaded yet.
syncDirection is a simple property with no code for handling setting and getting but
syncTo has both a setter and a getter. When you set the property it should remove any
old attached event listeners as well as add a new listener. The getter just returns the value of a
private variable called _syncTo.

Notice how we look up the oSyncTo element in the main document and also notice that we now can
set the function to handle the event directly. This is because the all variables and functions
in the htc file are private.

The onScroll function has become a little bit easier but the logic is exactly the same and the removeScrollSync equivalent is not
needed anymore. (We could have created the non behavior version without it as well.)

Demo

Notice

You have to fill the containers with something to make them scroll. The scrollLeft value will never
exceed the scrollWidth - clientHeight. This means that once you've reached the right edge no more
scrolling will occur. The same applies to scrollTop of course.