Unable to scroll over a list of items in a container

I have a list of data which i am rendering in a panel, but for some reason i am unable to scroll over it with my mouse scroll wheel,panel has a scrollbar.

I am able to select the scrollbar and slide up and down with it.

.tree-container
{
    padding:10px;
    max-height: 150px;
    overflow-y: scroll;
}

<div class="tree-container">
  <div class="role-item">Role Items</div>
 <div class="role-item">Role Items</div>
 <div class="role-item">Role Items</div>
 <div class="role-item">Role Items</div>
 <div class="role-item">Role Items</div>
 <div class="role-item">Role Items</div>
 <div class="role-item">Role Items</div>
 <div class="role-item">Role Items</div>
 <div class="role-item">Role Items</div>
 <div class="role-item">Role Items</div>
 <div class="role-item">Role Items</div>
 <div class="role-item">Role Items</div>
 <div class="role-item">Role Items</div>
</div>

In here I am rendering all the items once the data is fetched into a dive with tree-container class and each item in it have role-item class with text in it.

Views
RoleItem.js

    DE.Views.Roles = Common.UI.BaseView.extend(_.extend({
        el: '#left-panel-roles',

        template: _.template([
            '<div class="role-box layout-ct vbox">',
                '<div class="role-header">Roles',
                '<div class="role-btn-close"></div>',
                '</div>',
                '<div class="search-body">',
                    '<div class="search-container">',
                        '<input type="text" name="" spellcheck="false" class="form-control " placeholder="Search" data-hint="1" data-hint-direction="left" data-hint-offset="small">',
                    '</div>',
                    '<div class="options">',
                        '<label><input type="checkbox" class="chk-multi-select"><span>Multi Select</span></label>',
                        '<label><input type="checkbox" class="chk-unmapped"><span>Unmapped</span></label>',
                        '<label><input type="checkbox" class="chk-reorder"><span>Reorder</span></label>',
                    '</div>',
                '</div>',
                '<ul class="roles-list"></ul>',
            '</div>'
        ].join('')),

        renderTreeNode: function ($parent, nodes) {
            let me = this;
            nodes.forEach(node => {
                let $li = $('<li>')
                    .attr('data-id', node.id)
                    .addClass('role-item')
                    .append($('<span>').addClass('item-text').text(node.text));

                if (node.children && node.children.length > 0) {
                    $li.addClass('has-children');
                    let $childList = $('<ul>').addClass('child-list').hide();
                    me.renderTreeNode($childList, node.children);
                    $li.append($childList);
                }

                $li.attr('draggable', 'true');
                $parent.append($li);
            });
        },

    }, DE.Views.Roles || {}));

Controller
RoleItem.js

    DE.Controllers.Roles = Backbone.Controller.extend(_.extend({
        models: [],
        collections: ['Roles'],
        views: ['Roles'],

        onLaunch: function () {
            this.api = this.getApplication().getController('Viewport').getApi();
            this.panelRoles = this.createView('Roles');
            this.panelRoles.on('render:after', _.bind(this.onAfterRender, this));
            this._isDisabled = false;
            this.fetchRolesData();
        },

        fetchRolesData: function () {
            let me = this;
            this.api.fetchRolesTree(function (data) {
                me.fetchedRolesTree = data;
                me.renderTree();
            });
        },

        initTree: function () {
            this.$list = $('.roles-list', this.$el);
            this.$list.empty();
            this.$list.append('<div class="tree-container"></div>');
            this.$treeContainer = this.$list.find('.tree-container');
            this.showLoading();
        },

        renderTree: function () {
            if (!this.fetchedRolesTree) return;

            this.hideLoading();
            this.$treeContainer.empty();
            this.renderItems(this.fetchedRolesTree, this.$treeContainer);
            this.bindTreeEvents();
        },

        renderItems: function (items, $parent) {
            items.forEach(item => {
                let $item = $('<div class="role-item" data-id="' + item.id + '"></div>');
                $item.append('<span class="item-text">' + item.text + '</span>');
                if (item.children && item.children.length > 0) {
                    $item.addClass('has-children');
                    let $childContainer = $('<ul style="display:none;"></ul>');
                    this.renderItems(item.children, $childContainer);
                    $item.append($childContainer);
                }
                $parent.append($item);
            });
        },

        bindTreeEvents: function () {
            let me = this;
            this.$treeContainer.on('click', '.role-item > .item-text', function (e) {
                if (!$(e.target).hasClass('drag-handle') && !me.dragState.active) {
                    e.stopPropagation();
                    let $item = $(this).closest('.role-item');
                    $item.toggleClass('expanded');
                    $item.children('ul').slideToggle(200);
                    me.onSelectItem($item.data('id'), $(this).text());
                }
            });
        },

       //  other code
    }, DE.Controllers.Roles || {}));

Style for role items

.roles-list {
    list-style-type: none;
    padding-left: 0;
    height: calc(100% - 120px); /* Adjust based on your header and search heights */
    overflow-y: auto;
    position: relative;
    -ms-overflow-style: auto;
}


.roles-list ul {
    list-style-type: none;
    padding-left: 20px;
    padding-right: 20px;
}

.roles-list ul:first-child {
    padding-right: 15px;
}

.roles-list-container {
    padding: 10px;
}

/* Tree container */
.tree-container {
    padding: 10px;
    height: 100%;
    max-height: 500px;
    overflow-y: scroll;
    box-sizing: border-box;
}

I should be able to scroll with my mousewheel over the list of items in my panel.