How to get vertical scroll position of TUniScrollBox

[Tim]

In my project i have a TUniScrollBox onto which rows of dynamically generated controls are placed. For performance reasons, when the frame is first displayed we only show the first 15 rows. At the bottom of the list there is a "more" button that the user can click to fetch the next 15 rows.

 

What we would like to happen instead is for the next 15 rows to be fetched automatically when the user scrolls to the bottom of the list. To accomplish this, we need to be able to detect somehow when the vertical scrollbar of the TUniScrollBox is at or near its bottommost position. The TUniScrollBox control itself doesn't seem to have any properties or events relevant to the scroll position. Is there some way to do this? Ideally i would be able to call some function on a regular basis that would return the vertical scrollbar position as a percentage (0% = topmost position, 100% = bottommost position).

 

I tried to see if it might be possible to accomplish this using Javascript, but when i run the following code

UniSession.AddJS( 'alert(' + UniScrollBox1.JSName + '.inputEl.dom.scrollY); ');

i get an error message:

Unable to get property 'dom' of undefined or null reference
alert(O13.inputEl.dom.scrollY);

So TUniScrollBox doesn't have a corresponding DOM element? Is there any extJS documentation i can refer to?

 

I would appreciate any help on this.

[Sherzod]

Hi,

 

Can you make a simple testcase for this?

 

Best regards,

[Tim]

Thanks for the reply. I have attached a zip file containing a simple example project. Every time you click on "...more..." it adds another 15 rows to the list. How can i change it so that it automatically adds another 15 rows when the user scrolls to the end of the list?

TestCaseForForum.zip

[Sherzod]

Thanks for the testcase, I will check this

[Sherzod]

How can i change it so that it automatically adds another 15 rows when the user scrolls to the end of the list?

 

Maybe like this ?!:

 

1. UniScrollBox1 -> ClientEvents -> ExtEvents -> function afterrender:

function afterrender(sender, eOpts)
{
    var me = sender;
    me.el.dom.addEventListener('scroll', function(event) {
        var element = event.target;
        if (element.scrollHeight - element.scrollTop === element.clientHeight) {
            ajaxRequest(me, 'scrolledToBottom', []);
        }
    })
}

2. UniScrollBox1 -> OnAjaxEvent:

procedure TMainForm.UniScrollBox1AjaxEvent(Sender: TComponent;
  EventName: string; Params: TUniStrings);
begin
  if EventName = 'scrolledToBottom' then
  begin
    AddSomeMoreRows
  end;

end;

[Tim]

thanks, it works perfectly!

[shawdown]

 

Maybe like this ?!:

 

1. UniScrollBox1 -> ClientEvents -> ExtEvents -> function afterrender:

function afterrender(sender, eOpts)
{
    var me = sender;
    me.el.dom.addEventListener('scroll', function(event) {
        var element = event.target;
        if (element.scrollHeight - element.scrollTop === element.clientHeight) {
            ajaxRequest(me, 'scrolledToBottom', []);
        }
    })
}

2. UniScrollBox1 -> OnAjaxEvent:

procedure TMainForm.UniScrollBox1AjaxEvent(Sender: TComponent;
  EventName: string; Params: TUniStrings);
begin
  if EventName = 'scrolledToBottom' then
  begin
    AddSomeMoreRows
  end;

end;

 

Perfect solution for UniScrollBox.

 

I tried with UniHTMLFrame but it does not work.

Any suggestion?

[Sherzod]

Hi,

 

Ok, I will check

[Sherzod]

Hi,

 

I tried with UniHTMLFrame but it does not work.

Any suggestion?

 

 

Sorry, can you make a simple testcase for this ?!

[shawdown]

Following is an example.

 

TestCaseForForum.zip

[Sherzod]

Thanks for the testcase, I will check and let you know

[Sherzod]

me.body.el.dom.addEventListener...

function afterrender(sender, eOpts)
{
    var me = sender;
    me.body.el.dom.addEventListener('scroll', function(event) {
        var element = event.target;
        if (element.scrollHeight - element.scrollTop === element.clientHeight) {
            ajaxRequest(me, 'scrolledToBottom', []);
        }
    })
}

[shawdown]

 

me.body.el.dom.addEventListener...

function afterrender(sender, eOpts)
{
    var me = sender;
    me.body.el.dom.addEventListener('scroll', function(event) {
        var element = event.target;
        if (element.scrollHeight - element.scrollTop === element.clientHeight) {
            ajaxRequest(me, 'scrolledToBottom', []);
        }
    })
}

Perfect

 

My need was to capture when the scroll bar was at the top.

 

Here's an example.

 

    var me = sender;
me.body.el.dom.addEventListener('scroll', function(event) {
        var element = event.target;


if (element.scrollTop === 0) {
            ajaxRequest(me, 'scrolledToBottom', []);
        }
    })

Thanks Friend.

[Sherzod]

So, have you got what you wanted ?

[shawdown]

Yes.

Worked perfectly.

 

 

Thank you very much.