Horizontal Scrolling Div

Question

Sono molto interessato a mettere un div scorrevole orizzontale con screenshot della mia app sul mio sito web. Quello che sto cercando di fare è molto simile a quello che viene fatto here.

Questo è il codice HTML relativo sono riuscito a trovare:

<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> 

E qui è il 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; 
} 

Sembra che questo ha qualcosa a che fare con i ruoli o forse alcuni javascript che posso trovo

Cosa sta succedendo qui?

Answer 1

E 'semplice per farlo con HTML e jQuery:

creare un semplice ScrollBox:

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

e semplici frecce:

<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> 

si può fare un aspetto migliore ...

e successivamente aggiungere il codice Jquery/JavaScript:

<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

Se si utilizzano immagini di dimensioni fisse, è possibile provare il seguente codice. Ho preso questo da here.

<html> 
<title>HTMLExplorer Demo: Horizontal Scrolling Content</title> 
<head> 
<style type="text/css"> 
#outer_wrapper { 
    overflow: scroll; 
    width:100%; 
} 
#outer_wrapper #inner_wrapper { 
    width:6000px; /* If you have more elements, increase the width accordingly */ 
} 
#outer_wrapper #inner_wrapper div.box { /* Define the properties of inner block */ 
    width: 250px; 
    height:300px; 
    float: left; 
    margin: 0 4px 0 0; 
    border:1px grey solid; 
} 
</style> 
</head> 
<body> 

<div id="outer_wrapper"> 
    <div id="inner_wrapper"> 
     <div class="box"> 
      <!-- Add desired content here --> 
      HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
     </div> 
     <div class="box"> 
      <!-- Add desired content here --> 
      HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
     </div> 
     <div class="box"> 
      <!-- Add desired content here --> 
      HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
     </div> 
     <div class="box"> 
      <!-- Add desired content here --> 
      HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
     </div> 
     <div class="box"> 
      <!-- Add desired content here --> 
      HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
     </div> 
     <div class="box"> 
      <!-- Add desired content here --> 
      HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
     </div> 
     <!-- more boxes here --> 
    </div> 
</div> 
</body> 
</html> 

Answer 3

Per rendere scorrimento orizzontale è possibile utilizzare il metodo Element.scrollIntoView() con tasselli:

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

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

Si tratta di una tecnologia sperimentale, ma è supported almost in all browsers.