如何水平滚动内容而不使用滚动条并仅使用CSS
与此站点相同:https://www.tumblr.com/explore/text 您可以看到,当我们拖动上述站点中每个帖子中的hashtags时,它们会自动水平拖动,并且没有任何滚动条。但是,这种效果是由JavaScript与CSS结合创建的。如何水平滚动内容而不使用滚动条并仅使用CSS
现在我不知道我们是否可以用纯粹的CSS来做同样的效果。请帮帮我。非常感谢你!
好吧,我想你以后有什么是像下面
您需要鼓捣与它周围一点。
基本上你在隐藏滚动条。它有点笨重,但多数民众赞成你所期望的我猜没有jquery平滑。
的Html
<div class="viewport-clip">
<div class="viewport">
<div class="horizontal">
<div class="item">#test</div>
<div class="item">#test1</div>
<div class="item">#test2</div>
<div class="item">#test3</div>
<div class="item">#test4</div>
<div class="item">#test5</div>
</div>
</div>
</div>
和CSS
*/
.viewport-clip {
width: 200px;
height: 30px;
overflow: hidden;
}
.viewport {
width: 100px;
height: 60px; /* Note the excessive extra height to keep h-scrollbar at bay */
overflow: auto;
overflow-x: auto;
overflow-y: hidden;
}
.horizontal {
width: 330px;
height: 30px;
}
.item {
width: 50px;
float: left;
background: white;
color:#888;
padding-right: 5px;
height: 30px;
}
我的意思是我们不会在这里使用任何javascript @Ace –
无法完成,您必须使用javascript为它 – AceWebDesign
他们是不一样的@Ace。你知道光滑的滑盖旋转木马吗?这些井号标签就是这样工作的。但我不知道该怎么做。 –
不可能用纯的CSS。 –
我必须错过一些东西......你是说那个视线可以水平滚动吗?按照从左到右的水平方向,反之亦然,是否正确? – zer00ne
@ zer00ne没错。你应该看到上面的网站,使其更清楚 –