Smooth scroll div horizontally by a pixel amount, no scrollbars

Question

I've got 10 floating DIVs in a container DIV that I want to be able to scroll through using a button.

I'd like to use left/right buttons to make the container DIV scroll 300px horizontally to display the next floating DIV.

I'd like the width of the container to appear as 100% of the window, and I'd also like there to be no horizontal scroll-bar on the bottom. If it could scroll sideways that'd be great but it's not a must have.

Here's what I've got: http://jsfiddle.net/696je/

I'm just looking for a function and the way to activate the function for left/right buttons.

I've tried Google for hours, I've tried Flesler's ScrollTo but I haven't had any luck, it might be something do to with the way I've got the width set up, anyway, thanks for your help.

I understand that you've said you've tried to google for hours, and you've tried a ScrollTo plugin... but you haven't shown us WHAT you have tried, so therefore it could be suggested that you haven't tried anything... I suggest posting the code you have tried, and then we can try and fix it for you, hopefully helping you to understand it a bit better in the process. — ahren, Sep 26 '12 at 03:40

score 0 · Answer 1 · edited May 23 '17 at 12:12

I was a little confused by your code you posted in the jsFiddle. You said you wanted no horizontal scroll bars, yet your stuff was set up that way. I went with the horizontal scroll bar since that is what you were going with in your code.

I made a working function here jsFiddle. To get it to work in the frame you need to put focus in the "Result" window (just click anywhere), then use your left and right arrows.

I must give the javascript for keypress credit from this post

score 0 · Accepted Answer · answered Sep 26 '12 at 06:28

0

It is possible to do with mix of CSS (display:inline-block and white-space:nowrap) and jQuery (scrollLeft)

here is a jsFiddle implementation with minimum possible wrappers.

answered Sep 26 '12 at 06:28

Anil Kumar

165
6

This is great, there's just one quirk: the content (text) inside the .item divs goes beyond the borders, is there any way to fix this? – toams7 Sep 26 '12 at 13:11
Never mind, I added other white-space tag. One other thing: can I activate the function with an tag? – toams7 Sep 26 '12 at 13:22
yeah u can activate the function on tag but remember to prevent event using preventDefault otherwise your page might reload – Anil Kumar Sep 26 '12 at 14:02

Smooth scroll div horizontally by a pixel amount, no scrollbars

2 Answers2