Cuộn ngang Div

Question

Tôi rất quan tâm đến việc đặt div trượt ngang với ảnh chụp màn hình ứng dụng của tôi trên trang web của tôi. Những gì tôi đang cố gắng làm là rất giống với những gì được thực hiện here.

Đây là html có liên quan tôi có thể tìm thấy:

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

Và đây là CSS liên quan:

.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; 
} 

Nó trông như thế này có cái gì để làm với vai trò hoặc có thể một số javascript tôi có thể không tìm thấy.

Điều gì đang xảy ra ở đây?

Answer 1

Nó đơn giản để làm điều này với html và jquery:

Tạo một ScrollBox đơn giản:

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

và đơn giản mũi tên:

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

Bạn có thể làm cho nó trông tốt hơn ...

và sau đó, thêm mã 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

Nếu bạn đang sử dụng hình ảnh có kích thước cố định, bạn có thể thử mã bên dưới. Tôi nhận được điều này từ 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

Để làm cho cuộn ngang bạn có thể sử dụng phương pháp Element.scrollIntoView() với neo:

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

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

Đây là một công nghệ thử nghiệm nhưng nó là supported almost in all browsers.