how to add an event that fires after scrolling the scrollbar to the end

Question

I am working with standalone (not mobile) and I think it is _getScroll method for reaching it. how to implement it here qooxdoo selectbox example I found similar for mobile implementing virtual scrolling list console.log says container._getScroll is not a function.

Answer 1

The idea is to get scrollbar from a widget, the scrollbar you are needed is NativeScrollbar of the widget qx.ui.list.List. Then add event handler for a "scroll" event. In handler u have to compare current position of scroll and maximum.

Try the code below (eg copy and paste into the Qooxdoo playground).

qx.Class.define("SelectBoxWithScrollEndEvent", {
  extend: qx.ui.form.SelectBox,
  
  construct: function(){
    this.base(arguments);
    this.__setupScroll();
  },
  
  events: {
    "scrollEndHappened": "qx.event.type.Event"
  },
  
  members: {
    __setupScroll: function(){
      const list = this.getChildControl("list");
      const scrollbar = list.getChildControl("scrollbar-y");
      scrollbar.addListener("scroll", function(e){
      if (scrollbar.getMaximum() === scrollbar.getPosition()){
        this.fireEvent("scrollEndHappened");
      }}, this);
    }
  }
});

const box = new SelectBoxWithScrollEndEvent();
const data = new qx.data.Array([1,2,3,4,5,1,2,3,4,5,1,2,3,4,5,1,2,3,4,5,1,2,3,4,5]);
const controller = new qx.data.controller.List(data, box);

box.addListener("scrollEndHappened", function(){
  alert("SCROLL HAPPENED ALERT");
}, this);
this.getRoot().add(box);