Jump to content

How to get vertical scroll position of TUniScrollBox


Tim

Recommended Posts

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.

Link to comment
Share on other sites

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

post-2020-0-85694800-1509341081_thumb.png

Link to comment
Share on other sites

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;
Link to comment
Share on other sites

  • 2 months later...

 

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?
Link to comment
Share on other sites

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', []);
        }
    })
}
Link to comment
Share on other sites

 

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.

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...