Disable both-scrolling when adding two scrollable panels

[dtturcotte]

I've added two scrollable panels, side-by-side. When I move my track pad, both scrollable panels scroll. When I use the right-hand scroll button to scroll, only that target scrollable panel scrolls. How can I make it so that only the scrollable panel that I'm hovering over scrolls? Relevant code snippets below:

    updateScrollablePanel(scrollablePanel: any, elementArr: Array<any>) {
        let sizer = scrollablePanel.getElement('panel')
        sizer.clear(true)
        elementArr.forEach((element) => {
            sizer.add(element, {
                padding: {
                    left: element.x,
                },
            })
        })
        scrollablePanel.layout()

        return scrollablePanel
    }

    addMissionUIContainer(x: number, y: number) {
        let leftScrollablePanel = this.addScrollablePanel(250, 290, 150, 250)
        // prettier-ignore
        let rightScrollablePanel = this.addScrollablePanel((this.width / 2) + 80, 290, 150, 250)

        let leftHeader = this.addTextElement('To-Do', 0, 0, null, '#000', 16, 0)
        let rightHeader = this.addTextElement('Mission Status', 200, 0, null, '#000', 16, 0)

        // Left container
        let allText = ''
        GameService.getMissionScenarios().forEach((scenario: any) => {
            allText += scenario.description
            if (scenario.mission_lbgroup && scenario.mission_lbgroup.missionClues && scenario.mission_lbgroup.missionClues.length) {
                let missionClues = scenario.mission_lbgroup.missionClues.map((m) => m.joinedWordsBBCode).join(', ')
                allText += `: Clues: ${missionClues}`
            }
            allText += '\n\n'
        })

        let textElement = this.addTextElement(allText, 0, 0, 125, '#000', 12, 0)

        leftScrollablePanel = this.updateScrollablePanel(leftScrollablePanel, [textElement])

        // Right container
        let radius = 15
        let circles = 20 // Number of circles
        let swayRange = 50 // Range of the sway from center
        let yPos = 0 // Start from the top
        let xPos = 0 // Start from the left
        let phase = 0 // Initial phase for sine wave
        let phaseStep = Math.PI / 10 // Change in phase for each step, adjust for more/less winding

        let circlesArr = []
        for (let i = 0; i < circles; i++) {
            // Calculate xPos using a sine wave
            xPos = swayRange * Math.sin(phase)
            // Create a circle at xPos, yPos
            let circle = this.scene.add.circle(xPos, yPos, radius, 0x000000).setOrigin(0.5, 0.5)
            // Add the circle
            circlesArr.push(circle)
            // Move yPos down for next circle
            yPos += radius * 2.5
            // Update phase
            phase += phaseStep
            if (i === 0) {
                circle.setFillStyle(0xff0000)
            }
        }

        rightScrollablePanel = this.updateScrollablePanel(rightScrollablePanel, circlesArr)

        let missionUIContainer = this.scene.add.container(x, y)
        missionUIContainer.add(leftHeader)
        missionUIContainer.add(leftScrollablePanel)
        missionUIContainer.add(rightHeader)
        missionUIContainer.add(rightScrollablePanel)

        return missionUIContainer
    }

Note: the scrollable panels do not seem to be overlapping (using .drawBounds(this.scene.add.graphics(), 0xff0000) on this.scene.rexUI.add.scrollablePanel({ ... }):