Horizontal Scrolling Div

Question

I'm very interested in putting a horizontal sliding div with screenshots of my app on my website. What I am trying to do is very similar to what is done here.

This is the relevant html I could find:

<div id="screenshot_container" class="screenshot_container">
            <div id="screens" class="screenshots" style="left: 0px;">
            
                <img alt="Screenshot of iOu (I owe you)Debt Calculator" class="screen2" src="http://lh3.ggpht.com/np-fUQ6p_rWh62eDpB4BtiQOEounRiIaCdI8-KXmcR28hKrDwU0_NnJ3NQQNK1GIsMQipZw3Yy_PtG5cCF7hqU5X=h200" id="screen1">
                
                <img alt="Screenshot of iOu (I owe you)Debt Calculator" class="screen2" src="http://lh3.ggpht.com/S02i2HMnIRBe6ms6PbYLLJEW5rCxHWUj3wZ25tP5zOMIGYgIdy6211ihD6MJUvUiSm-rwPEJb-fYkBI5MupxBvQ=h200" id="screen2">
                
                <img alt="Screenshot of iOu (I owe you)Debt Calculator" class="screen2" src="http://lh3.ggpht.com/j6SyrkCI1Vn7vGT3Tf84LeXdSz5ys1rindbmjOrPFExhJEJ-Eny71C0bIk0lEJyVnlxYopMkbhIlCgU7f1RICQ=h200" id="screen3">
                
                <img alt="Screenshot of iOu (I owe you)Debt Calculator" class="screen2" src="http://lh5.ggpht.com/6J4S5KBiz1FyUZM8S6nD8Xxy3yOU4337Cpus_Z7VMLze_4O00zIIYPUAHMUHtLxRWC9xJbf5lAnjt1cFDRulEjSJ=h200" id="screen4">
                
                <img alt="Screenshot of iOu (I owe you)Debt Calculator" class="screen2" src="http://lh4.ggpht.com/6vGrgfvQy-nVyiKIt7u2dxthgySj_92-Gt-IbwTZjtepMGqI1Njgj37mxEYVta8xPHm2t3hcJxsrmLzzMRDMRlsD=h200" id="screen5">
                
                <img alt="Screenshot of iOu (I owe you)Debt Calculator" class="screen2" src="http://lh3.ggpht.com/mcqLEpzbXuCrpK4XI4I_MoxWdS39PrRGxD0_nixDI4_i1p8xh7d6WLrlYYs05HcM2yKb8IQMMeeaEHkQw1syAD0=h200" id="screen6">
                
            </div>
        <div tabindex="0" class="carousel-side carousel-left" style="display: none;" aria-hidden="true"><input type="text" tabindex="-1" role="presentation" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="carousel-arrow carousel-arrow-left"></div></div><div tabindex="0" class="carousel-side carousel-right"><input type="text" tabindex="-1" role="presentation" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="carousel-arrow carousel-arrow-right"></div></div></div>

And here is the relevant CSS:

.carousel-side {
    cursor: pointer;
    height: 200px;
    position: absolute;
    top: 0;
    width: 100px;
}
.carousel-arrow {
    height: 57px;
    position: absolute;
    top: 71px;
    width: 46px;
}
.carousel-left {
    background: linear-gradient(to right, #FFFFFF 0px, rgba(255, 255, 255, 0) 100%) repeat scroll 0 0 transparent;
    left: 0;
}
.carousel-right {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0px, #FFFFFF 100%) repeat scroll 0 0 transparent;
    right: 0;
}
.carousel-side:focus {
    outline: 0 none;
}
.carousel-arrow-left {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAA5CAYAAABJahkUAAAEjUlEQVR42u2ad0iUYRzHTS+vrmm2s22297JFRXth0aDSoqhoE+0JFtHSjKKkIVG2lIoG0h/GNbWhGTkyNVpHl6OLsmwg/WHfX/yMl5db3r3v817UwQfx9I7v877f97eex8vr/+sffZWVlVUC3kDHVGZ0/H4lTxVNIquCGqA2qANqgWpAD3w8TbQ3C6sJGoIWoA0IAs1BfV6Mr0dcdb7KPqAKX91WoAcYDEaeyy4KO/okfyIvgMQbaJGeIFrHNiBR7cBQMAMsCU82ndBH3f8enmTait/7gZZ8R7y1toYv3/4moCsYC5aDyClXc7K9IpLLiAOP30XjvXGgI98VH62t4cde7gumgI0FX0vje8amfyoXTRzPKozju9Ad1KW7pJU1yKf12Lfk5dlgx4VcS1L1/Q9+SkUTZ569T8Df54E+bCmdaGtUZms0Ap3BaPIyOLDM+PKVXHA58bkWI/5nMftcjHCJNfQclym09QKTwNr8r6VnhsZnWWyJJs7nWm7xAkl4A9WFy6xRl+PyQBAKtt00FRsbRaf+sCeahd8WJlySBauzNSgijAALwb7IVHOWI8F/hOdY7ggRLsmClKqbckIJAatgjdiQS88KnBUtRLjEGlRr+IPWoD+HsvAbpuLEoJjHJRURrbpwiTWq8Ze3B8PAfEooESnmDGuhTlPhkixI6TgAdAPjwQpwePa1529dEayacCsFEtUSwWAa2JJhKbniijVUFS4LdZQU2oIhYC7YfSyzMNVVa6gmXFYgNQZdwBiwDBxabnz5WgnBigm3kQV7g8lgPQqkOHmBpLlwG1lwEBdI25EFbyhlDcWEWymQOlF3woXP/s133+SpIdgt4TJrNOMCiVqpNciCpx0VSJoIt9ILUhacyVnwujMFknDhkkxYkx9C+lAY2LknxZyulp+VEq7nToU8HfLmy48d4y5mm0QJdke4geN038RXxWubHXlkES3aFeHeLJxqj/6DzmYatRDt6hWvyuGPIkloaELeg79FuJ4jCtUho8DKuJz3iSIfTFeF6yStVzfuYqjBPadGalcyjlsrpsqnTdHu1tlqZ05b873f5WtMRmGa2tZxp1axNlGlL5n+u2EoKrmqRMOgZlkrnWEH8CxvAj20+V9KT1a0exfaSMjmJTSA7wCGgwVgb0SqOVNp6yjZAcnHEIFggKQAS1TSOmo0y/KStyeXvKuVLHlVGU9YaTI6cpOxSKkmQ825iq22bpYSbZ2ISZbNRtqdbCtk6GlndLHU1dGFyGmtrWHRHLDrYt6HexWxjjDhNjapWvIm1VSwKb2o5LKzIVOocCUHokJ3JBwUahUaQQvfA3KQbVs5O/RH83Kdt2CChW8XurPNcupp0RV+sHtpJtyZja1dD9+mSYUfyyiI5Z3nrny3tDv64WArcUPCi4+x/gcffibhkY/MUVyBtuXkpu2ZFTubt5SwZuR9/LY0MCYtbd2d1+u59m/KiU3bYx92CrUgFhrMdOZF+XNe8JzjTTLr+HHYC+Cr3JDfM/ACPetclsQ6vnxlDfwAG9hOOo+xiZ0FlJ+G8+GfVk/A/QI9BnRUx5FfpwAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
    height: 57px;
    left: 0;
    overflow: hidden;
    width: 46px;
}
.carousel-arrow-right {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAA5CAYAAABJahkUAAAEkElEQVR42u2aZ0wUQRzFOaQoWFDsolixF+w1SuwtaERjj0aNPcZeEzTGihiNEgsxig2ixhLiB8jZO2KkiICxcPEU8IyiWEL8gG/I22RFxeNud28+eMkvgbvb2Xezb+dfZt3c/r9c+CouLjYBd+ABPIkHEe+bZBVeAXgDX1AN1AB+oAqoxB9iknG2vSiyNggEQaAFaAzqgqr8Ye4yCRdW8KHooEOP3445nZE/FX8PAf1BZ9CUV6Eir45JFuFiRpuAXuG3LBu9I+9+C79tOYr/F4BJIAS04o/zpfdNMvhbzGZbMHLvozdRbjtvFwvCLmVm4L0IsBiMAB1BA9rKy6XW4ezVBMFido+k58UqwgVdYlI+5n4pisNna0EY6EHvV3epdShcWKA7mHXy6bt4tXBB5T33fpzNst3C51vAdHpf3MC1eH8Ybx2V8F5gflyWzVxauMIi84uX+M5een8YaA/q0TqehlqHwutQ+IIzWbZrfxMuCIlLt739UnQS310JxoKuXEL9uGQaY50/CL9elnBBvaik71ctBWZ8fxOYAvpy3a9pmHV+E55pu/Ev4QoRSdZ0HLMbzAWDuTIJ61TWPdo6I1wQev5pLqwTg2OXgVAGrIZMHfSLts4KFwRFPyq8YilIwPHhDFi9QTPgz1xHe+toIVxZMnc+sKYyYM0GA0Frju2ruXW0Eq4w/fKz1xjnAFgCRoFOIIBphXbRVmvhinVSbYUXMd4GMAH0ZC6kXaKmh3DFOofT8pIw5nYwEwwALRnsnF8y9RKusNj84hXG3Q8WgeGgA6jvdKKmt3BVohaL8VeDcaCb09HWCOGKdRBtr+Acm5mo9XMq2holXGH9zZxsnGePSOhYZbVzKFEzWrgqUTuB860AY5ioNVJbR0rhSqKGaJvIaDuZ0faX2lZK4YrvdzywpuC8W8FUaghksCo70rpSuMLIcxmWnM/ftzBJa8fKylt64YJGBx/aEl4WrGRNW58rjfzCBf1OpZnp9QAKd5de+JT47Husprpyeawk9YyLGzQ2853I5ZeCocxnakjtcZEKYD0/zcI7lCmwUvp5SCmceXuUqktWvuTLaOHCGtGpecmqdNexvqSRwksKjPzCSywwJvKcjnWCjRJe0g34XHSMN+Fo9ioDHO696y28pIhOsqZh7F1gDhgE2nDDwPH+i57CS7UtRCLVBzTXpG2hl3BV6rqcqWuXcqeuRgtXFQvzWCy01byrq6XwUuXZNKfLMyOEq6KgdgWx3sJVLYiFmrYg9BIurHEu+/0dHLcNzNC86aOHcLHUpeQXXsAx68B4FgBNDNvUcmRHwrDGplZ7QGW0ko3fuFXtuomO6lwk9YnlaN431bV5b6dwUTLNOP4k/6I02yV2bIn7c7s77HBqboxa9Lb7r5NdtkFlh3A/LmODIh5aI4Vg/333P8U//yBmeY3LtgTteHqiCi998Kobr1Y3j05Ozv7wdSG9PNxlm7B2PGhTkXYJ5DZ3TxLMPXvXbHvbIdyTl786E/yGXJfr8D0fKZ5R+YtdPGgDH954PrwSXtI8FVTGzLuTCsrTb7IJ/gnqNnRU0D37OwAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
    height: 57px;
    overflow: hidden;
    right: 0;
    width: 46px;
}

It looks like this has something to do with roles or maybe some javascript I can't find.

What is going on here?

Answer 1

It's simple to do this with html and jquery:

Create a simple ScrollBox:

<div id="scrollbar" style="width:980px;height:199px;overflow-y:hidden;overflow-x:hidden;">
Your loooooooooong content
</div>

and simple arrows:

<div class="scrollright" style="float: right; cursor: pointer; margin-bottom: 5px; margin-right: 5px;">RIGHT</div>
<div class="scrollleft" style="float: right; cursor: pointer; margin-bottom: 5px; margin-right: 5px;">LEFT</div>

You can make it looks better...

and after, add the Jquery/JavaScript code:

<script>
$('.scrollleft').click(function () {
    console.log('ok')
    $('#scrollbar').animate({
        scrollLeft: '-=153'
    }, 1000, 'easeOutQuad');
});
$('.scrollright').click(function () {
    console.log('ok')
    $('#scrollbar').animate({
        scrollLeft: '+=153'
    }, 1000, 'easeOutQuad');
});
</script>

Answer 2

To make horizontal scroll you could use Element.scrollIntoView() method with anchors:

var element = document.getElementById('elementId');

element.scrollIntoView(); // Scroll to this element

This is an experimental technology but it is supported almost in all browsers.