Page 1 of 1

Force horizontal scroll to item within div so it becomes visible

Posted: Sat Oct 10, 2015 3:58 pm
by Andy Parker

Hi,

I have a DIV that contains 10 small images, each next to each other forming a single horizontal row.

These images are within a single cell grid, and are placed into position using CSS.
The DIV (when tested in the Appery web test page displays a horizontal scroll bar and allows scrolling from left to right to display the images (only 3 images actually fit on the screen at any one time).

However, when testing on mobile devices, the scroll (when the finger is swiped from left to right/right to left) is very hit and miss, and the experience will definitely ensure negative feedback from users.

If I were to add scroll buttons (like a left arrow and right arrow) either side, I need to be able to programmatically scroll the row of images left and right.

Is there a way to do this within the Appery system?
I've looked at the "document.getElementById('MyID').scrollIntoView(true);" command but had no luck.

Example:
Each number below is an image, but only 3 of those images fit on the screen (one next to the other) at any one time.

0 1 2 3 4 5 6 7 8 9

I need to (by javascript) scroll the div so that any 3 images I like (consecutively) are displayed.( eg 234 or 456 or 789 etc)

Any help would be truly useful, many thanks.

Andy


Force horizontal scroll to item within div so it becomes visible

Posted: Sat Oct 10, 2015 4:30 pm
by Andy Parker

Close this, I've figured it out:

/code

Code: Select all

 var x = $("[name=fav_div]").scrollLeft(); 
 x=x+ 20; 
 $("[name=fav_div]").scrollLeft(x);     

/code


Force horizontal scroll to item within div so it becomes visible

Posted: Sat Oct 10, 2015 8:25 pm
by Serhii Kulibaba

Hello Andy,

We are very sorry, but custom code is something outside the scope (http://devcenter.appery.io/support-po...) of our support.


Force horizontal scroll to item within div so it becomes visible

Posted: Sun Oct 11, 2015 5:04 am
by Illya Stepanov

Thanks for the update, Andy!