实现始终显示水平滚动条的最佳方法是这样的:
默认情况下,仅当用户将鼠标悬停在容器或滚动中的元素上时才会出现水平滚动条。如果您希望用户知道有更多项目可以滑动/或轻拂,那么这可能毫无用处。
这里我得到了一个类别列表,它们是列表项或简单的链接。我希望它们在桌面和移动设备中沿着水平方向显示,用户可以快速浏览。它还可以用于图像或卡片。这是很好的用户体验,比在移动设备上堆叠更好。
始终显示水平滚动条,以便用户知道还有更多内容可以水平滚动。
这是 HTML:
// Note I added z-index in case you can't reach the link due to another navbar on top. You can play with z-index if you need to.
<div class="cool-shadow" style="z-index: 5;">
<div class="scrollable-nav">
<div class="container">
<div class="some-class">
<a href="#" class="navbar-item">Sports</a>
<a href="#" class="navbar-item">News</a>
<a href="#" class="navbar-item">Science</a>
<a href="#" class="navbar-item">Programming</a>
<a href="#" class="navbar-item">Bla Blah</a>
</div>
</div>
</div>
</div>
这是使它们可滚动的 css:
.scrollable-nav {
// First four are essential.
display: block;
width: 100%;
overflow-x: scroll;
white-space: nowrap;
// You can change these below if you'd like
height: auto;
padding: 10px;
margin: 0;
padding-top: 8px;
padding-bottom: 8px;
background-color: #2f3142;
z-index: 5;
}
// Make sure the navbar-items are inline block.
.scrollable-nav .navbar-item {
display: inline-block;
}
这是确保滚动条始终可见的 CSS。
始终显示 x 滚动条,以便用户注意水平滑动项目,尤其是当它们在移动设备上或无论屏幕大小如何链接溢出时。
.scrollable-nav::-webkit-scrollbar:horizontal {
height: 11px;
}
.scrollable-nav::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid green;
/* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
// This one is important.
.scrollable-nav::-webkit-scrollbar {
-webkit-appearance: none;
}
/*
.scrollable-nav::-webkit-scrollbar:horizontal {
width: 11px; // This one is optional in case you wanna do this vertically too
} */