infinite scroll doesn't work.scroll event doesn't get fired.

64 views
Skip to first unread message

Anil Daanu

unread,
Jul 6, 2016, 9:47:23 PM7/6/16
to KnockoutJS
i am using knockout with jquery to implement the infinite scroll. but the scroll method in the viewModel is not being fired.

i have followed the below url to implement the same. 


please do let me know if am missing something here.

below is the view and viewModel

View:
<table id ="searchResultsTable" style="height: 500px; overflow: scroll;">
<tbody data-bind="foreach: rowResults, event: {scroll: scrolled}" style="height: 500px; ">
     !----some TR's---!
    </tbody>
</table>


ViewModel:
public scrolled(data: any, event: any) {
var elem = event.target;
if (elem.scrollTop > (elem.scrollHeight - elem.offsetHeight - 200)) {
this.getSearchResults();
}
}

Ian Yates

unread,
Jul 7, 2016, 10:25:42 AM7/7/16
to KnockoutJS
Your code uses a table rather than a div.  My guess is that the table and/or tbody doesn't do overflow: scroll and the scrolled event very well.  Could you wrap the table in a div and just let the div scroll?  I've found table scrolling hacky in the past, and if I want a cross-browser way of doing a static header but allowing scrolling I tend to do two tables positioned absolutely in a common parent div.  The first table just has the header row.  The second table has the header row plus all of the data rows.  Since the first table sits in front of the second table, the user sees static headers but can still scroll the parent div.
Reply all
Reply to author
Forward
0 new messages