Align Bars in middle of view

[serenity81]

Is there a better builtin way to align the being played bar in middle of view. I am using this way:

const scrollViewHeight = api.settings.player.scrollElement.clientHeight;
const cursorBar = document.querySelector('.at-cursor-bar').offsetHeight; // Bar height can change during the song so its approx
api.settings.player.scrollOffsetY = - (scrollViewHeight / 2) + (cursorBar / 2);
api.updateSettings();

[Danielku15]

There is currently no official built-in way to customize the scrolling behavior to achieve a centered scrolling. Adding a built-in way to scroll could be tricky as people might have custom needs (e.g. what should happen on scrolling or when using the horizontal layout).

I could add some events which you can tap into to customize stuff but I have to think of a good design though to allow proper customization of the scrolling behaviors. I think it should allow to fully customize the scrolling or just do stuff before/after scrolling. #2049 added to track it.

Technically alphaTab calls internally the internalScrollToCursor method to check whether to scroll or not after the cursors are moved. So technically you could override the method but things can change there any time as its not a public API. Its unlikely to change soon so for now you should be safe with something like this:

// patch internal scroll function with custom logic (untested example)
api.internalScrollToCursor = ((originalInternalScrollToCursor) => {
	return function(barBounds) {
		const scrollElement = this.uiFacade.getScrollContainer();
		const scrollViewHeight = scrollElement.height;
		const cursorBar = barBoundings.realBounds.h;
		this.settings.player.scrollOffsetY = - (scrollViewHeight / 2) + (cursorBar / 2);
		originalInternalScrollToCursor.apply(this, arguments);
	};
})(api.internalScrollToCursor);

[serenity81]

Thank appreciated