Highlighted

Setting y limits for mousewheel scroll of a movieclip (html5 canvas)

Explorer ,
Sep 08, 2020

Copy link to clipboard

Copied

I have created a mousewheel scroll for a movieclip to move in the y direction, however I want it to stop at the bottom and top of the movieclip. Currently, it just scrolls forever. This is  html5 canvas

-------------------------------

My script is:

canvas.addEventListener("mousewheel", scrollMC.bind(this));

function scrollMC(event) {


if (event.wheelDelta < 0 || event.detail < 0 ) { 
this.myMovieclip.y-=20; 
}
else if (event.wheelDelta > 0 || event.detail > 0 ) { 
this.myMovieclip.y+=20; 
}

}

-----------------------

Thank you for your help!

 

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi.

 

What I like to do is to create a custom clamp method. Like this:

canvas.addEventListener("mousewheel", scrollMC.bind(this));

function scrollMC(event)
{
	if (event.wheelDelta < 0 || event.detail < 0)
	{
		this.myMovieclip.y = clamp(this.myMovieclip.y - 20, 100, 300);
	}
	else if (event.wheelDelta > 0 || event.detail > 0)
	{
		this.myMovieclip.y = clamp(this.myMovieclip.y + 20, 100, 300);
	}
}

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

 

I hope this helps.

 

Regards,

JC

TOPICS
Code, How to

Views

28

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Setting y limits for mousewheel scroll of a movieclip (html5 canvas)

Explorer ,
Sep 08, 2020

Copy link to clipboard

Copied

I have created a mousewheel scroll for a movieclip to move in the y direction, however I want it to stop at the bottom and top of the movieclip. Currently, it just scrolls forever. This is  html5 canvas

-------------------------------

My script is:

canvas.addEventListener("mousewheel", scrollMC.bind(this));

function scrollMC(event) {


if (event.wheelDelta < 0 || event.detail < 0 ) { 
this.myMovieclip.y-=20; 
}
else if (event.wheelDelta > 0 || event.detail > 0 ) { 
this.myMovieclip.y+=20; 
}

}

-----------------------

Thank you for your help!

 

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi.

 

What I like to do is to create a custom clamp method. Like this:

canvas.addEventListener("mousewheel", scrollMC.bind(this));

function scrollMC(event)
{
	if (event.wheelDelta < 0 || event.detail < 0)
	{
		this.myMovieclip.y = clamp(this.myMovieclip.y - 20, 100, 300);
	}
	else if (event.wheelDelta > 0 || event.detail > 0)
	{
		this.myMovieclip.y = clamp(this.myMovieclip.y + 20, 100, 300);
	}
}

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

 

I hope this helps.

 

Regards,

JC

TOPICS
Code, How to

Views

29

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 08, 2020 0
Adobe Community Professional ,
Sep 09, 2020

Copy link to clipboard

Copied

Hi.

 

What I like to do is to create a custom clamp method. Like this:

canvas.addEventListener("mousewheel", scrollMC.bind(this));

function scrollMC(event)
{
	if (event.wheelDelta < 0 || event.detail < 0)
	{
		this.myMovieclip.y = clamp(this.myMovieclip.y - 20, 100, 300);
	}
	else if (event.wheelDelta > 0 || event.detail > 0)
	{
		this.myMovieclip.y = clamp(this.myMovieclip.y + 20, 100, 300);
	}
}

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

 

I hope this helps.

 

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 09, 2020 0
Explorer ,
Sep 09, 2020

Copy link to clipboard

Copied

Beautiful! Thank you so much JC … I will try this out.

 

Thx,

Mike

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 09, 2020 0