[SOLVED] UI Element Scrollbar Usage

Help & Support
1

Hi all,
I’m developing a basic UI interface where you can zoom a model using a scroll bar.
I Tryed out the ELEMENT SCROLLBAR: I setted up it nicely, using my graphic, but now I did not understand how to catch event when user drag the handle for setting the scale of my model.

Is there some particular event?
I tryed with:

var UiscrollBarZoom = pc.createScript('uiscrollBarZoom');

// initialize code called once per entity
UiscrollBarZoom.prototype.initialize = function() {
    this.entity.element.on('change', function (event) {
        console.log("CHANGED!");
    }, this);
};

// update code called every frame
UiscrollBarZoom.prototype.update = function(dt) {
    
};

but “change” is never fired when I drag the handle

2

You are probably looking for the set:scroll event that is fired on the Scroll View object: https://developer.playcanvas.com/en/api/pc.ScrollViewComponent.html#event:set:scroll

eg https://playcanvas.com/editor/scene/1056055

var Main = pc.createScript('main');
Main.attributes.add('scrollViewEntity', {type: 'entity'});

// initialize code called once per entity
Main.prototype.initialize = function() {
    this.scrollViewEntity.scrollview.on('set:scroll', function (position) {
        console.log(position);
    }, this);
};
3

Thank you. It is working.