[FIXED-190] Controlling background image as text scrolls

[nosarious]

This may not be a Sencha question, but I'm open to suggestions from anyone.

I have a scrolling field of text and a background image. I would like to have the background image change as a point in the text enters the viewport.

This is similar to the Popular Science magazine sample on the ipad, where some articles change the background image to coincide with the images or text as you scroll through the article.

Anyone know of a trigger that can be accessed to achieve this?

Right now I am using onclick for thumbnails inside the text, but that's so '90's... Much nicer to have it change as a person scrolls.

[meyerovb]

Scroll isn't a documented event, but it's there nonetheless... and the scroller has no public property to get the dom element it represents, so you'll have to keep your own reference as in the code below, or else use scroller.parent.dom, but that points to the x-panel-body, not the x-panel



Ext.setup({ onReady: function () {
var panel= new Ext.Panel({
fullscreen: true,
html: '<div style="height: 1000px;">Scroll down</div>',
scroll: {
direction: 'vertical',
listeners: {
scroll: function (scroller, offset) {
panel.getEl().dom.style.backgroundColor =
offset.y < -200 ? 'red' : 'blue';
}
}
}
});
}});

[Jamie Avins]

We'll be updating the documentation so we have a public property here.

[evant]

I've updated the docs to reflect the scroller property on Component. Also updated some docs on the scroller as well.