Highlighted

Help needed with a custom text scrollbar in Animate

New Here ,
Apr 07, 2020

Copy link to clipboard

Copied

Greetings folks, I'm really hoping you can help me out with this one as I've been pounding my head against a wall for the last few hours...

 

I'm trying to create a custome scrollbar for a text field in an Animate CC 2020 HTML canvas file, but I can't for the life of me figure out how to get the dragger to stay bound within the scrollbar box. Currently the dragger moves correctly along the Y-axis, but its breaking out of the bounds of the scrollbar it's supposed to stay contained within.


As far as the single commented out line of code... that was an attempt from a couple of posts that I duct-taped together. It doesn't work, but it kinda feels like its going in the right direction so I left it in there just in case it might be useful for you.

 

Thank you sooo much in advance for any help you might be able to give. I desperately need it....

 

 

var scrollerHeight = 16;
var scrollBarHeight = 90;
var dragArea = scrollBarHeight - scrollerHeight;

var dragBounds = this.scrollerMC.scroller.getBounds();
var scrollBarBounds = this.scrollerMC.scrollBar.getBounds();

this.scrollerMC.scroller.on("mousedown", onMouseDown.bind(this));
this.scrollerMC.scroller.on("pressmove", onMouseMove.bind(this));
this.scrollerMC.scroller.on("pressup", onMouseUp.bind(this));


// mouse down event
function onMouseDown(evt){
	var item = evt.currentTarget;
	item.offset = {y:0};
	var pt = item.parent.globalToLocal(evt.stageY);
	item.drag = true;
}
// mouse up event
function onMouseUp(evt){
	var item = evt.currentTarget;
	item.drag = false;
}
// mouse move event
function onMouseMove(evt){
	console.trace(scrollBarBounds);
	var item = evt.currentTarget;
	if (item.y >= 0 && item.y <= dragArea){
		var pt = item.parent.globalToLocal(evt.stageX, evt.stageY);
		item.y = pt.y - item.offset.y;
		this.isiTextMC.isiText.y = item.y *-1;
	}else if (item.y <= 0){
		item.y = 0;
	}else if (item.y >= dragArea){
		item.y = dragArea;
	}
	
	//item.y = Math.max(scrollBarBounds.y, Math.min(scrollBarBounds.y+scrollBarBounds.height-dragBounds.height, evt.stageY)); 
    
	
}

 

Views

15

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

Help needed with a custom text scrollbar in Animate

New Here ,
Apr 07, 2020

Copy link to clipboard

Copied

Greetings folks, I'm really hoping you can help me out with this one as I've been pounding my head against a wall for the last few hours...

 

I'm trying to create a custome scrollbar for a text field in an Animate CC 2020 HTML canvas file, but I can't for the life of me figure out how to get the dragger to stay bound within the scrollbar box. Currently the dragger moves correctly along the Y-axis, but its breaking out of the bounds of the scrollbar it's supposed to stay contained within.


As far as the single commented out line of code... that was an attempt from a couple of posts that I duct-taped together. It doesn't work, but it kinda feels like its going in the right direction so I left it in there just in case it might be useful for you.

 

Thank you sooo much in advance for any help you might be able to give. I desperately need it....

 

 

var scrollerHeight = 16;
var scrollBarHeight = 90;
var dragArea = scrollBarHeight - scrollerHeight;

var dragBounds = this.scrollerMC.scroller.getBounds();
var scrollBarBounds = this.scrollerMC.scrollBar.getBounds();

this.scrollerMC.scroller.on("mousedown", onMouseDown.bind(this));
this.scrollerMC.scroller.on("pressmove", onMouseMove.bind(this));
this.scrollerMC.scroller.on("pressup", onMouseUp.bind(this));


// mouse down event
function onMouseDown(evt){
	var item = evt.currentTarget;
	item.offset = {y:0};
	var pt = item.parent.globalToLocal(evt.stageY);
	item.drag = true;
}
// mouse up event
function onMouseUp(evt){
	var item = evt.currentTarget;
	item.drag = false;
}
// mouse move event
function onMouseMove(evt){
	console.trace(scrollBarBounds);
	var item = evt.currentTarget;
	if (item.y >= 0 && item.y <= dragArea){
		var pt = item.parent.globalToLocal(evt.stageX, evt.stageY);
		item.y = pt.y - item.offset.y;
		this.isiTextMC.isiText.y = item.y *-1;
	}else if (item.y <= 0){
		item.y = 0;
	}else if (item.y >= dragArea){
		item.y = dragArea;
	}
	
	//item.y = Math.max(scrollBarBounds.y, Math.min(scrollBarBounds.y+scrollBarBounds.height-dragBounds.height, evt.stageY)); 
    
	
}

 

Views

16

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
Apr 07, 2020 0

Have something to add?

Join the conversation