[SOLVED] Scrollbar Usage

Help & Support
1

Simple, how do i use the scrollbar to scroll down a specific UI element without scrolling down my background and Menu bar
Here’s what my ui looks like ATM

Screenshot 2023-10-10 8.09.10 AM
Screenshot 2023-10-10 8.09.10 AM1366×768 125 KB

Edit: i also want to scrollbar to autohide when not hovered over or in use, i also need it to work with the computer scroll function and scroll wheel on a mouse

2

Hi @Kevin_Herod!

It’s not easy to create a working scrollbar from scratch. Luckily there is an example project that you can modify.

https://developer.playcanvas.com/en/tutorials/dynamic-ui-scroll-view/

5

ive made an attempt, however i have major issues with the “template” it only works with said template, and i dont want to use any template, i just want to select where i want to scroll in the editor without making an entire template and keeping that persons UI design and function

6

You can adjust the example completely and don’t use the number entities, button and scripts so it only has and empty field inside where you can add whatever you want. You just have to be careful not to break the basic structure.

Maybe using HTML/CSS is a better alternative in your case? I only don’t have any examples in mind you can use.

1 Like
7

the project given was completely useless, however, i was able to use AI to help peice together a script that works beautifully, Once i finish tweaking the script, i will reply with the script to further help any future coders who come across this issue, after that this can be marked as SOLVED

1 Like
8

The Scrollbar has been completed, its a simple script that allows you to scroll, here’s how you use it, make a parent object (i suggest this be invisible) make sure it fits the screen you want to see the scrolled text, ex. if you have a topbar on your website with a home button/login button then you want to make sure the parent objects confines do not leak over that object. after that you would attach anything to the parent object, these child objects will be the items you will be scrolling. Attach the following script to your parent object

var ScrollScript = pc.createScript('scrollScript');

ScrollScript.attributes.add('scrollSpeed', { type: 'number', default: 0.1, title: 'Scroll Speed' });
ScrollScript.attributes.add('scrollObject', { type: 'entity', title: 'Scroll Object' });
ScrollScript.attributes.add('scrollLimit', { type: 'number', default: 10, title: 'Scroll Limit' });

// Store the initial position of the scrollObject
ScrollScript.prototype.initialize = function() {
    this.initialPosition = new pc.Vec3();
    if (this.scrollObject) {
        this.initialPosition.copy(this.scrollObject.getLocalPosition());
    }
    this.app.mouse.on('mousewheel', this.onMouseWheel, this);
};

// Handle mouse wheel events
ScrollScript.prototype.onMouseWheel = function(event) {
    if (!this.scrollObject) {
        return;
    }

    // Calculate the amount to scroll (reversed)
    var scrollAmount = -event.wheel * this.scrollSpeed;

    // Update the position of the scrollObject
    var newPosition = this.scrollObject.getLocalPosition();
    newPosition.y += scrollAmount;

    // Calculate the limits of scrolling within the parent entity
    var minY = this.initialPosition.y; // Minimum Y position
    var maxY = minY + this.scrollLimit; // Maximum Y position based on scrollLimit

    // Ensure that the scrollObject stays within the limits
    newPosition.y = pc.math.clamp(newPosition.y, minY, maxY);

    this.scrollObject.setLocalPosition(newPosition);
};

this is your scrollscript, it will give you attribute settings that you can tweak in the editor, such as scrollspeed, and scroll distance (so you cant scroll forever). I hope i explained this semi decently, this script was created mostly by an AI chatbot, so i dont take full credit, Enjoy :slight_smile:

1 Like