qooxdoo

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


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.


Solution

  • 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);