Wrong hover and click events position when selecting on/after scrolling

[dscheg]

Description

Looks like scrolling is not taken into account when calculating hover and click position, so the wrong element is selected after scroll. Positioning fixes only after moving the cursor outside the drawing area.

Also, if you uncomment flushing the chart on scrolling, the deselected points on the spline are not repainted, whilst multiple selection is turned off.

Steps to check or reproduce

<link href="https://cdnjs.cloudflare.com/ajax/libs/billboard.js/3.10.3/billboard.min.css" rel="stylesheet" type="text/css"/>

<div id="chart"></div>

<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/billboard.js/3.10.3/billboard.min.js"></script>

path.bb-bar._selected_ { fill:blue !important; }

const chart = bb.generate({
    bindto: "#chart",
    transition: {duration: 500},
    axis: {rotated: true},
    bar: {width: 30},
    size: {height: 1000},
    data: {
        zoom: {enabled: false},
        selection: {enabled: true, grouped: true, multiple: false, draggable: false},
        columns: [
            ["data1", 30, 200, 100, 170, 150, 250, 231, 238, 348, 685, 12, 123, 343, 455, 839, 123, 22, 3, 99, 818, 284, 89, 928, 98, 28, 823],
            ["data2", 30, 200, 100, 170, 150, 250, 231, 238, 348, 685, 12, 123, 343, 455, 839, 123, 22, 3, 99, 818, 284, 89, 928, 98, 28, 823]
        ],
        types: {
          data1: "bar",
          data2: "area-spline"
        },
        colors: {
          data1: "red",
          data2: "green"
        }
    }
});

// addEventListener("scroll", _ => chart.flush());

[netil]

@dscheg thanks for the report.

Also, if you uncomment flushing the chart on scrolling, the deselected points on the spline are not repainted, whilst multiple selection is turned off.

When you call .flush() at the time of previous task is done, will cause unexpected result.