How do I animate the timeline with the mouse wheel in Animate CC?

UPDATED ANSWER (05/28/2021):

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/mouse_wheel_navigation

var that = this;
this.targetTimeline = this;
this.targetTimeline.loop = true;
this.targetTimeline.force = 40;
this.targetTimeline.friction = 0.9;
this.targetTimeline.minFrame = 0; // set the start range value here
this.targetTimeline.maxFrame = this.targetTimeline.totalFrames - 1; // set the end range value here

this.loopClamp = function(value, min, max)
{
	if (value < min)
		return max;
	
	if (value > max)
		return min;
		
	return value;
};

this.clamp = function(value, min, max)
{
	if (value < min)
		return min;
	
	if (value > max)
		return max;
		
	return value;
};

this.onMouseWheel = function (e)
{
	e.preventDefault();

	var evt = window.event || e;
	var delta = Math.max(-1, Math.min(1, evt.wheelDelta || -evt.detail));

	that.targetTimeline.speed = delta * that.force;
};

this.tickHandler = function (e)
{
	var clamp = that.targetTimeline.loop ? "loopClamp" : "clamp";
	
	that.targetTimeline.speed *= that.targetTimeline.friction;
	that.targetTimeline.gotoAndStop(that[clamp](that.targetTimeline.currentFrame + that.targetTimeline.speed, that.targetTimeline.minFrame, that.targetTimeline.maxFrame));
};

this.start = function ()
{
	canvas.addEventListener('mousewheel', that.onMouseWheel.bind(that));
	canvas.addEventListener('DOMMouseScroll', that.onMouseWheel.bind(that));
	createjs.Ticker.on("tick", that.tickHandler);
};

if (!this.hasStarted)
{
	this.gotoAndStop(this.targetTimeline.minFrame);
	this.start();
	this.hasStarted = true;
}

______________________________________________________________________________

Hi.

Here is my suggestion.

var that = this;

this.targetTimeline = this;

this.targetTimeline.loop = false;

this.force = 2;

this.onMouseWheel = function(e)

{

    e.preventDefault();

    var delta;

    if (e == window.event)

          delta = -10 / window.event.wheelDeltaY;

    else

          delta = e.detail / 30;

    that.scrubTimeline(that.targetTimeline, delta, that.force);

};

this.scrubTimeline = function(targetTimeline, delta, amount = 1)

{

    var direction = delta < 0 ? 1 : -1;

    targetTimeline.gotoAndStop(targetTimeline.currentFrame + (amount * direction));

};

this.start = function()

{

    document.getElementById('canvas').addEventListener('mousewheel', that.onMouseWheel.bind(that));

    document.getElementById('canvas').addEventListener('DOMMouseScroll', that.onMouseWheel.bind(that));

};

if (!this.hasStarted)

{

    this.stop();

    this.start();

    this.hasStarted = true;

}

I hope this helps.

Regards,

JC