• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Explorer ,
Sep 08, 2020 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!

 

TOPICS
Code , How to

Views

204

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
community guidelines

correct answers 1 Correct answer

Community Expert , Sep 09, 2020 Sep 09, 2020

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 ma
...

Votes

Translate

Translate
Community Expert ,
Sep 09, 2020 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

Votes

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
community guidelines
Explorer ,
Sep 09, 2020 Sep 09, 2020

Copy link to clipboard

Copied

LATEST

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

 

Thx,

Mike

Votes

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
community guidelines