View Full Version : [FIXED-190] Controlling background image as text scrolls

23 Jul 2010, 10:18 AM
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.

23 Jul 2010, 1:02 PM
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
30 Jul 2010, 10:52 AM
We'll be updating the documentation so we have a public property here.

14 Aug 2010, 5:30 AM
I've updated the docs to reflect the scroller property on Component. Also updated some docs on the scroller as well.