[Request] Modify amCharts XYChart to Allow Page Scrolling When Inner Scroll Reaches Limit

[denniscalazans]

Description

Currently, the amCharts XYChart does not allow the page to continue scrolling when the inner scroll reaches its limit.
I'm not sure if that is a bug or a feature.

The desired behavior is to ensure that the page continues scrolling when the inner scroll of the XYChart reaches its limit.
Would that be possible?

Steps to Reproduce

0. Create page which document generates a scroll bar, for example 3000px tall
1. Create an XYChart with horizontal and-or vertical scrollbars.
2. Scroll the chart to its limit using the mouse wheel.
3. Observe that the page does not continue scrolling when the inner scroll reaches its limit.

Relevant Code

The relevant code can be found in src/.internal/charts/xy/XYChart.ts, specifically lines 626-701.
The handleWheel method needs to be modified to detect when the inner scroll is over and allow the page to continue scrolling.

Additional Context

To detect when the inner scroll is over, the rangechanged event of the Scrollbar can be used.
This event is triggered whenever the scroll range changes.
The start and end properties of the Scrollbar can be checked to determine if the scroll is at the beginning or end of the range.
Implement logic to handle the scroll behavior when the inner scroll is over.

I believe that the following lines should be run conditionally

amcharts5/src/.internal/charts/xy/XYChart.ts

Lines 510 to 517 in c32fbe3

	// Ignore wheel event if it is happening on a non-chart element, e.g. if
	// some page element is over the chart.
	if ($utils.isLocalEvent(wheelEvent, this)) {
	wheelEvent.preventDefault();
	}
	else {
	return;
	}

Perhaps they should only be applied in those situations:

amcharts5/src/.internal/charts/xy/XYChart.ts

Lines 577 to 700 in c32fbe3

	if ((wheelX === "zoomY" || wheelX === "zoomXY") && shiftX != 0) {
	this.yAxes.each((axis) => {
	if (axis.get("zoomY")) {
	let start = axis.get("start")!;
	let end = axis.get("end")!;
	let position = axis.fixPosition(plotPoint.y / plotContainer.height());
	if (wheelZoomPositionY != null) {
	position = wheelZoomPositionY;
	}
	let maxDeviation = axis.get("maxDeviation", 0);
	let newStart = Math.min(1 + maxDeviation, Math.max(-maxDeviation, start - wheelStep * (end - start) * shiftX * position));
	let newEnd = Math.max(-maxDeviation, Math.min(1 + maxDeviation, end + wheelStep * (end - start) * shiftX * (1 - position)));
	if (1 / (newEnd - newStart) < axis.getPrivate("maxZoomFactor", Infinity) / axis.get("minZoomCount", 1)) {
	this._handleWheelAnimation(axis.zoom(newStart, newEnd));
	}
	}
	})
	}
	if ((wheelY === "zoomY" || wheelY === "zoomXY") && shiftY != 0) {
	this.yAxes.each((axis) => {
	if (axis.get("zoomY")) {
	let start = axis.get("start")!;
	let end = axis.get("end")!;
	let position = axis.fixPosition(plotPoint.y / plotContainer.height());
	if (wheelZoomPositionY != null) {
	position = wheelZoomPositionY;
	}
	let maxDeviation = axis.get("maxDeviation", 0);
	let newStart = Math.min(1 + maxDeviation, Math.max(-maxDeviation, start - wheelStep * (end - start) * shiftY * position));
	let newEnd = Math.max(-maxDeviation, Math.min(1 + maxDeviation, end + wheelStep * (end - start) * shiftY * (1 - position)));
	if (1 / (newEnd - newStart) < axis.getPrivate("maxZoomFactor", Infinity) / axis.get("minZoomCount", 1)) {
	this._handleWheelAnimation(axis.zoom(newStart, newEnd));
	}
	}
	})
	}
	if ((wheelX === "panX" || wheelX === "panXY") && shiftX != 0) {
	this.xAxes.each((axis) => {
	if (axis.get("panX")) {
	let start = axis.get("start")!;
	let end = axis.get("end")!;
	let delta = this._getWheelSign(axis) * wheelStep * (end - start) * shiftX;
	let newStart = start + delta;
	let newEnd = end + delta;
	let se = this._fixWheel(newStart, newEnd);
	newStart = se[0];
	newEnd = se[1];
	this._handleWheelAnimation(axis.zoom(newStart, newEnd));
	}
	})
	}
	if ((wheelY === "panX" || wheelY === "panXY") && shiftY != 0) {
	this.xAxes.each((axis) => {
	if (axis.get("panX")) {
	let start = axis.get("start")!;
	let end = axis.get("end")!;
	let delta = this._getWheelSign(axis) * wheelStep * (end - start) * shiftY;
	let newStart = start + delta;
	let newEnd = end + delta;
	let se = this._fixWheel(newStart, newEnd);
	newStart = se[0];
	newEnd = se[1];
	this._handleWheelAnimation(axis.zoom(newStart, newEnd));
	}
	})
	}
	if ((wheelX === "panY" || wheelX === "panXY") && shiftX != 0) {
	this.yAxes.each((axis) => {
	if (axis.get("panY")) {
	let start = axis.get("start")!;
	let end = axis.get("end")!;
	let delta = this._getWheelSign(axis) * wheelStep * (end - start) * shiftX;
	let newStart = start + delta;
	let newEnd = end + delta;
	let se = this._fixWheel(newStart, newEnd);
	newStart = se[0];
	newEnd = se[1];
	this._handleWheelAnimation(axis.zoom(newStart, newEnd));
	}
	})
	}
	if ((wheelY === "panY" || wheelY === "panXY") && shiftY != 0) {
	this.yAxes.each((axis) => {
	if (axis.get("panY")) {
	let start = axis.get("start")!;
	let end = axis.get("end")!;
	let delta = this._getWheelSign(axis) * wheelStep * (end - start) * shiftY;
	let newStart = start - delta;
	let newEnd = end - delta;
	let se = this._fixWheel(newStart, newEnd);
	newStart = se[0];
	newEnd = se[1];
	this._handleWheelAnimation(axis.zoom(newStart, newEnd));
	}
	})
	}

But I'm not sure if that's the right way to do it.

"@amcharts/amcharts5-fonts": "^5.0.1",
Chrome - Version 130.0.6723.70 (Official Build) (arm64)

Considerations

Control + scroll is not what is needed.

Listening for "wheel" events on xyChart.plotContainer is possible,
Checking if the inner scroll has reached its limit can be done.

However, setting "wheelX" back to "none" does not resolve the issue of the event trap.

[denniscalazans]

I opened a Draft PR pointing to where I believe the improvement could be done.
https://github.dev/amcharts/amcharts5/pull/1775/