Hi, I’m using phaser-scrollable from https://github.com/trueicecold/phaser-scrollable.
I have successfully created scroll able items using it. But I want to get the item which user clicked.
How to get which item is clicked ?
Please help me I’m new in phaser.
Thanks.
Hello @Nilesh_Shripal,
i believe you could do something like this;
this.scroller = game.add.existing(new ScrollableArea(x, y, w, h, params));
var textStyle = {font:"30px Arial", fill:"#ffff00"};
for (var i=0;i<10;i++) {
for (var j=0;j<80;j++) {
var text = game.make.text(i*330, j*30, "Yes, everything scrolls", textStyle);
text.name = 'text-'+i+'_'+'j';
text.inputEnabled = true;
text.input.useHandCursor = true;
text.events.onInputDown.add(sayName, this);
scroller.addChild(text);
}
}
scroller.start();
function sayName(e) {
console.log(e.name);
}
I hope this would work for you 
hello Patron, thanks for your replay.
I tried your solution but when I click on any item 'sayName(e) function is not getting call.
Please help me solving this issue.
Thanks for response.
I added following code in create function
var scroller = game.add.existing(new ScrollableArea(10, 10, game.width, game.height, verticalScroll));
var textStyle = { font: "30px Arial", fill: "#ffff00" };
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 80; j++) {
var text = game.make.text(i * 330, j * 30, "Yes, everything scrolls", textStyle);
text.name = 'text-' + i + '_' + 'j';
text.inputEnabled = true;
text.input.useHandCursor = true;
text.events.onInputDown.add(sayName, this);
scroller.addChild(text);
}
}
scroller.start();
After that I added the following function
function sayName(e) {
console.log("in sayName " + e.name);
}
I see but where is the scroller is containing.
If it’s not private can you share all ?? 
This is my Logo class
var LoadCnt = 0;
var Game = {};
var maxX = 480;
var maxY = 800;
var scaleRatioX = 1, scaleRatioY = 1;
var gameRatio = window.innerWidth / window.innerHeight;
var firstRunLandscape;
var mTex_SoundOnBut;
var Snd_Theme, snd_GameOver, snd_levelComplete;
Game.Logo = function (game) {
};
Game.Logo.prototype = {
init: function () {
},
preload: function () {
// firstRunLandscape = this.game.scale.isGameLandscape;
},
create: function () {
var scroller = game.add.existing(new ScrollableArea(10, 10, game.width, game.height));
var textStyle = { font: "30px Arial", fill: "#ffff00" };
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 80; j++) {
var text = game.make.text(i * 330, j * 30, "Yes, everything scrolls", textStyle);
text.name = 'text-' + i + '_' + 'j';
text.inputEnabled = true;
text.input.useHandCursor = true;
text.events.onInputDown.add(sayName, this);
scroller.addChild(text);
}
}
scroller.start();
// setEggs(-0.75, 0.52);
},
update: function () {
},
}
function sayName(e) {
console.log("in sayName " + e.name);
}
And following is my index.html file
Bunny Egg Fun <script src="js/phaser-scrollable.min.js"></script>
<script src="js/Logo.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<style>
body {
margin: 0px;
padding: 0px;
}
#turn {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background-color: white;
background-image: url('assets/portrait.png');
background-repeat: no-repeat;
background-position: center center;
display: none;
z-index: 2;
}
</style>
</head>
<body>
<div id = "turn"></div>
<script type="text/javascript">
window.onload = function()
{
// var gameRatio = window.innerWidth/window.innerHeight;
// window.scrollTo(0,1);
game = new Phaser.Game(480,800,Phaser.CANVAS,'GameCanvas');
game.state.add('Logo', Game.Logo);
game.state.start('Logo');
};
</script>
</body>
Thanks for sharing with me 
now i can say that you need to put the sayName function inside your prototype like this i think:
sayName: function(e) {
console.log(e.name);
}
If this won’t work, i believe scrollArea is covering the clicking part’s.
When I added it I’m getting the following error
Uncaught ReferenceError: sayName is not defined
at the following line
text.events.onInputDown.add(this.sayName, this);
My code is as follows
Game.Logo = function (game) {
};
Game.Logo.prototype = {
init: function () {
},
preload: function () {
// firstRunLandscape = this.game.scale.isGameLandscape;
},
create: function () {
var scroller = game.add.existing(new ScrollableArea(10, 10, game.width, game.height));
var textStyle = { font: "30px Arial", fill: "#ffff00" };
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 80; j++) {
var text = game.make.text(i * 330, j * 30, "Yes, everything scrolls", textStyle);
text.name = 'text-' + i + '_' + 'j';
text.inputEnabled = true;
text.input.useHandCursor = true;
text.events.onInputDown.add(sayName, this);
scroller.addChild(text);
}
}
scroller.start();
// setEggs(-0.75, 0.52);
},
update: function () {
},
sayName: function (e) {
console.log("in sayName " + e.name);
}
}
Did you also add the function inside your prototype ? 
yes this is my code
Game.Logo = function (game) {
};
Game.Logo.prototype = {
init: function () {
},
preload: function () {
// firstRunLandscape = this.game.scale.isGameLandscape;
},
create: function () {
var scroller = game.add.existing(new ScrollableArea(10, 10, game.width, game.height));
var textStyle = { font: "30px Arial", fill: "#ffff00" };
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 80; j++) {
var text = game.make.text(i * 330, j * 30, "Yes, everything scrolls", textStyle);
text.name = 'text-' + i + '_' + 'j';
text.inputEnabled = true;
text.input.useHandCursor = true;
text.events.onInputDown.add(sayName, this);
scroller.addChild(text);
}
}
scroller.start();
// setEggs(-0.75, 0.52);
},
update: function () {
},
sayName: function (e) {
console.log("in sayName " + e.name);
}
}
just saw this should be;
text.events.onInputDown.add(this.sayName, this);
Yes you are write. Now error gone.
But when I click on any text item sayName is not getting called.
Please help me.
Then it’s because ScrollableArea is handling it’s own click and drag event’s and it’s not calling for Text’s… Let me check what we can do about this.
Ok. Thanks for your help.
I’m waiting for your reply.
Thanks.
Okey, so can you please try this:
Comment the code where you start the scroller and give it a try for only if sayName function is working or not ?
Hi, I tried it. sayName function is not working.
I’m looking for phaser-scrollable.js from github.
And there this code:
/**
* Start the Plugin.
*
* @method ScrollableArea#start
*/
ScrollableArea.prototype.start = function () {
this.game.input.onDown.add(this.beginMove, this);
this.callbackID = this.game.input.addMoveCallback(this.moveCanvas, this);
this.game.input.onUp.add(this.endMove, this);
this.game.input.mouse.mouseWheelCallback = this.mouseWheel.bind(this);
};
It’s adding a onDown event when you start scrollable. Other then that it’s not catching any down event or smt. Maybe the mask is preventing the input’s. hmm…
Yea i just saw that it’s adding a mask which is a graphics object from phaser to the scene which cover’s the all scene…
Can you try to also something like this:
scroller.mask.inputEnabled = false;
and after this try for click event sayName function please ?
Hi, you are write. Now sayName funciton is getting called.
But when I click on any text line it is showing same console log for each row
console output is as follows for clicking any row item:-
in sayName text-0_j
Problem solved thank you very much.
Yea i just saw that it was my mistake.
text.name = 'text-'+i+'_'+j; would just fix your naming problem