Hide Text on scrolling down bottom of the page, Sencha 3 ExtJS - extjs

Question

I am adding a text "Please scroll down" to the Terms and Conditions web page and the text should hide after reaching the bottom of the page. I created a container that shows the text on the entire page under View (Sencha Architect) but not sure how to hide it after scrolling to the bottom. I am trying to create a controller action under Controllers but it's not working. Attached is the code for TermsConditions controller. ItemID of the container containing text is scrollContainer
onAgreeClick: function(button, e, eOpts) {
var store = Ext.data.StoreManager.lookup('UserObjectStore');
var match = store.first(),
showAnnouncements = match.get('announcementPageToVisit');
if (showAnnouncements) {
button = this.getBtnAnnouncements();
} else {
button = this.getBtnCustomerSearch();
}
this.simulateHeaderButtonClick(button);
Ext.Ajax.request({
url: '../abc/services/users/saveUser',
method: 'GET',
headers: { 'Content-Type': 'application/json' },
success: function (response, action) {
},
failure: function (response, action) {
}
});
},
onDisagreeClick: function(button, e, eOpts) {
Ext.Msg.confirm('','You must agree to the Terms and Conditions in order to continue. Press YES to go back or NO to exit.',
function(answer) {
if (answer === "no") {
var h = abc.app.getController('HeaderButton');
h.terminateApp('ok', null, null);
}
}
);
},
BackToTaC: function(button, e, eOpts) {
this.getTermsBtnContainer().hide();
this.getTermsBackContainer().show();
this.getScrollContainer().hide();
this.getBtnAnnouncements().toggle();
this.getBody().getLayout().setActiveItem(6);
},
var me = this;
dataview.getEl().on('scroll', function(e, t) {
if(t.scrollHeight - t.scrollTop - t.clientHeight === 0) {
}
});// I already tried to hide under this but it doesn't work
onTermsBeforeShow: function(component, eOpts) {
var me = this;
var termsView = component.down('dataview');
var termsStore = termsView.getStore();
termsStore.getProxy().actionMethods = {create: 'POST', read: 'POST', update: 'POST', destroy: 'POST'};
termsStore.load();
},

Answer 1

I have had similar requirements for Extjs Panel and I handled them by getting the height of the grid and comparing the height with the current Y Position of the grid.
In the panel page , I had
var toBeAbsoluted = this.getHeight() / 95 * 100; // approximation 95% seemed optimum in my case
if(this.getY() >= (this.getHeight() - toBeAbsoluted ))
buttonToHide.hide()