:: Forum >>

Detect scroll bar is at top bottom

Tried these without success
oGrid.getScrollTop() == oGrid.getScrollHeight() // false
oGrid.getPanelHeight() // 0
oGrid.getContentHeight() // 0


Beyond the solution, what is the rationale to find it?
Thierry Nivelet (http://FoxInCloud.com/)
Tuesday, July 21, 2015
The size is calculated after the grid is written to the page, so you need some timeout before reading the size. You should use getScrollTop(), getScrollHeight() and getContentHeight("total") for the actual size of the full content area (header, rows, footer, scrollbars).

You may also look at /source/lib/grid/_overflow.js
Alex (ActiveWidgets)
Monday, July 27, 2015
Here is an example -

obj.onScrollTopChanged = function(){

    var distanceToBottom = 1,
        scrollTop = this.getScrollTop(),
        scrollHeight = this.getScrollHeight(),
        scrollVisible = this.getScrollBars(),
        scrollBarHeight = (scrollVisible == 'horizontal' || scrollVisible == 'both') ? AW.sy : 0,
        contentHeight = this.getContentHeight('total');

    if (scrollHeight + scrollBarHeight - scrollTop - contentHeight <= distanceToBottom){
        console.log('end of scroll');
    }
};
Alex (ActiveWidgets)
Tuesday, July 28, 2015
Thanks Alex
Thierry Nivelet (FoxInCloud)
Friday, August 7, 2015
Hi Alex,

The solution you suggested works fine when moving to the last row scrolls the rows down. However, if rows are already scrolled down to the max., moving between the last and the one-before-last row does not seem to trigger in the above code snippet
console.log('end of scroll');

Here is what I'm looking at: when first or last row is current, hitting the up or down arrow key triggers an event. On that event, we'll load the previous/next page in the grid.

Here is a public testable URL: http://foxincloud.com/tutotest/eventlog.tuto

this provides a reference to the aw grid object:
var obj = $('eventlog_scx-grd-grd').oGrid

here is a screenshot: ftp://foxincloud.com/Screenshots/FiC/aw.grid.lastRow.png

Thanks in advance,
Thierry Nivelet (FoxInCloud)
Monday, November 2, 2015
In this case you should look at selection change and keyboard events, not scrolling. You can listen to onCurrentRowChanged event to find when the current row changes.

var index = grid.getCurrentRow();
var position = grid.getRowPosition(index);
var count = grid.getRowCount();

If position == 0 then you are at the first row. If position == count-1 then it is the last one. At this point you should also listen to keyboard events to get up/down keys.
Alex (ActiveWidgets)
Monday, November 9, 2015
successfully implemented in:
http://foxincloud.com/tutotest/eventlog.tuto

grid paged on server side:
- when user attemps to move beyond the last row, the next page loads from the server automatically
- supports 'home' and 'bottom' keys
Thursday, March 24, 2016

This topic is archived.


Back to support forum

Forum search