Html 水平滚动 Div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17584668/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 10:58:38 来源:igfitidea点击:
Horizontal Scrolling Div
提问by Corey Horn
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.
我对在我的网站上放置一个带有我的应用程序屏幕截图的水平滑动 div 非常感兴趣。我正在尝试做的与这里所做的非常相似。
This is the relevant html I could find:
这是我能找到的相关html：
<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:
这是相关的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.
看起来这与角色或某些我找不到的 javascript 有关。
What is going on here?
这里发生了什么？
回答by MM PP
It's simple to do this with html and jquery:
用 html 和 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:
然后，添加 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>
回答by Andrii Verbytskyi
To make horizontal scroll you could use Element.scrollIntoView()method with anchors:
要进行水平滚动，您可以将Element.scrollIntoView()方法与锚点一起使用：
var element = document.getElementById('elementId');
element.scrollIntoView(); // Scroll to this element
This is an experimental technology but it is supported almost in all browsers.
回答by FrameWorker
If you are using images of fixed size, you can try the below code. I got this from 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>
