Making window with Scrollable Text

[TheChilliPL]

I'm trying to make my Quest System and it goes well, but I wonder if there's some way to make window with scrollable text (Quest Description).
I want text to be scrollable only if long enough, by using mouse scroll (and if it's possible, by touch/mouse dragging)

 

[Jonforum]

In JS Yes.
You will need to familiarize yourself with the filter() method
https://www.w3schools.com/jsref/jsref_filter.asp

Here is a source code that I use to build a slider system.
There is probably another way, but this is the simplest.
This is for my items menu slider scroll, but it is identical for my quest system.
These the base to put a system with a scroll slider .

//□▼↓▼□═══════════════════════════════════════════════════□□═══════════════════════════════════════════════════□↓↓↓
    //1: Construit Items_List_Global (fait une liste en array)
    //$gameVariables.menu_items.build_list_Item();
    menu_items.prototype.build_list_Item = function(){
        this.alpha_itemsList = $gameParty.items();
    }
//□▲↑▲□═══════════════════════════════════════════════════□□═══════════════════════════════════════════════════□↑↑↑
//□▼↓▼□═══════════════════════════════════════════════════□□═══════════════════════════════════════════════════□↓↓↓
    //2: Construit une list avec filtre base sur alpha_itemsList
    //$gameVariables.menu_items.build_list_Item_Filtered()
    menu_items.prototype.build_list_Item_Filtered = function(){
        var filter = this.currentFilter;
        this.filtered_itemsList = this.alpha_itemsList.filter(function ($item) {
            return $item.has_filter(filter); // has_filter return true or false see items_Data proto
        });
    }
//□▲↑▲□═══════════════════════════════════════════════════□□═══════════════════════════════════════════════════□↑↑↑
//□▼↓▼□═══════════════════════════════════════════════════□□═══════════════════════════════════════════════════□↓↓↓
    //3: sort la list filtered_itemsList // ['None','Name','Quantity','Price','Weight','LastReceved'];
    //$gameVariables.menu_items.sort_list_Item_Filtered()
    menu_items.prototype.sort_list_Item_Filtered = function(){
        if(this.currentSorting === 0){ // sort par default None : par .id <
            console.log('sort par default None: ');
            this.filtered_itemsList.sort(function(a, b){return a.id-b.id });
        }else if (this.currentSorting === 1){ // sort par Name :  ._name <
            console.log('sort par Name : ');
            this.filtered_itemsList.sort(function(a, b){ return a._name-b._name });
        }else if (this.currentSorting === 2){ // sort par Quantity :  .getQTY() <
            console.log('sort par Quantity: ');
            this.filtered_itemsList.sort(function(a, b){ return (a.getQTY())-(b.getQTY()) }); // lag voir une solution TODO:
        }else if (this.currentSorting === 3){ // sort par Price :  ._valur <
            console.log('sort par Price: ');
            this.filtered_itemsList.sort(function(a, b){ return (a._valur)-(b._valur) });
        }else if (this.currentSorting === 4){ // sort par Weight :  ._weight <
            console.log('sort par Weight: ');
            this.filtered_itemsList.sort(function(a, b){ return (a._weight)-(b._weight) });
        }else if (this.currentSorting === 5){ // sort par LastReceved :  ._weight <
            console.log('sort par LastReceved: ');
            // TODO, probablement fair une variable suplementaire , a chaque new items, scan tous et ++1, saufe le item obtenue qui est remi a 0
        }
    }
//□▲↑▲□═══════════════════════════════════════════════════□□═══════════════════════════════════════════════════□↑↑↑
//□▼↓▼□═══════════════════════════════════════════════════□□═══════════════════════════════════════════════════□↓↓↓
    //4: build currentpage with filtered_itemsList
    //$gameVariables.menu_items.buildPage()
    menu_items.prototype.buildPages = function(){
        // note: max item in page are 15
        this.page_itemsList = [[]]; // reset list page (+ 1 page[] vierge oubligatoir)
        var maxIPP = 15;
        var nb_page = Math.ceil(this.filtered_itemsList.length/maxIPP);
        for(var i=0;i<nb_page;i++){
            this.page_itemsList[i] = this.filtered_itemsList.slice(maxIPP*i,maxIPP*(i+1));
        }
    }
    
//□▲↑▲□═══════════════════════════════════════════════════□□═══════════════════════════════════════════════════□↑↑↑

you can make similar like this but for quest .
Replace the sliding of the item scroll by a scroll text.