我为所有包含的row
创建了一个水平滚动的col
。
我用了这个问题的答案:Bootstrap 4 horizontal scroller div
但是,我发现container
中的元素被剪裁了。现在在一些OS-Browser组合(例如MacOS + Chrome)上,滚动条被隐藏,除非它被鼠标悬停并且在测试中我们的一个用户无法找到下一个(剪切的)col
元素。
我想知道如何“取消”超出容器宽度的元素,以便用户可以立即看到有更多内容需要滚动。
编辑:
相关代码来自this answer,也发布在codepen上。
编辑2:
请注意,我想阻止容器在滚动时移动。
保持隐藏的滚动条是OSX功能,如果用户希望滚动条保持可见,则用户必须选择退出。没有太多可以做的就是强迫它们保持可见。但你可以明确地设计它们,这样至少可以显示chrome和safari。
您可以测试Mac Os和chrome / safari组合,因为这是一个特定于平台的问题。然后,您可以覆盖滚动条的样式。这迫使它显示出来。
.testimonial-group > .row {
overflow-x: scroll;
white-space: nowrap;
}
.testimonial-group > .row::-webkit-scrollbar-track
{
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
.testimonial-group > .row::-webkit-scrollbar
{
width: 0px;
height: 12px;
background-color: #F5F5F5;
}
.testimonial-group > .row::-webkit-scrollbar-thumb
{
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
正如你所说的那样,你希望它作为表响应,其中默认情况下所有div的宽度都等于父级的可用宽度,那么你不应该使用col-sm-4
。具有此类的div将具有父级的33.33%宽度,并且您的其他div将肯定不可见。
因此,对于响应式div,您可以通过这种方式编辑此代码。 Added link for Codepen here.
<div class="container testimonial-group">
<div class="row text-center flex-nowrap">
<div class="col">1</div><!--
--><div class="col">2</div><!--
--><div class="col">3</div><!--
--><div class="col">4</div><!--
--><div class="col">5</div><!--
--><div class="col">6</div><!--
--><div class="col">7</div><!--
--><div class="col">8</div><!--
--><div class="col">9</div>
</div>
</div>
CSS
/* The heart of the matter */
.testimonial-group > .row {
white-space: nowrap;
}
.testimonial-group > .row > .col-sm-4 {
display: inline-block;
float: none;
}
/* Decorations */
.col { color: #fff; font-size: 48px; padding-bottom: 20px; padding-top: 18px;
}
.col:nth-child(3n+1) { background: #c69; }
.col:nth-child(3n+2) { background: #9c6; }
.col:nth-child(3n+3) { background: #69c; }
您需要覆盖默认滚动条颜色和行为
.row {
overflow-x: scroll;
scroll-behavior: smooth;
align-items: left;
justify-content: left;
flex-direction: row;
}
.col-sm-4 {
display: inline;
align-items: left;
justify-content: left;
}
/*scroll bar style all brwosers expet IE && Firefox*/
::-webkit-scrollbar {
width: 8px;
background-color: rgba(255,255,255,.4);
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: rgba(255,255,255,.4);
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #787c7d;
}
否则你可以用JS代替css