Bootstrap 4 防止在水平滚动溢出的行上裁剪

Question

我为所有包含的 col 创建了一个水平滚动的 row。

我用了这个问题的答案：Bootstrap 4 horizontal scroller div

但是，我发现container里面的元素被裁剪了。现在在某些 OS-浏览器组合（例如 MacOS+Chrome）上，滚动条是隐藏的，除非它被鼠标悬停并且在测试中我们的一个用户无法找到下一个（剪裁的）col 元素。

我想知道如何"unclip"超出容器宽度的元素，以便用户可以立即看到有更多内容需要滚动。

编辑：

相关代码来自this answer, and also posted on codepen.

编辑 2：

请注意，我想防止容器在滚动时移动。

Answer 1

正如您所说，您希望它作为 table-responsive，其中默认情况下所有 div 的宽度都与父级的可用宽度相等，那么您不应该使用 col-sm-4。带有此 class 的 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; }

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

Answer 3

您需要覆盖默认的滚动条颜色和行为

.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

Bootstrap 4 防止在水平滚动溢出的行上裁剪

Bootstrap 4 prevent clipping on overflowing row with horizontal scroll

css

scroll

clipping

overflow

bootstrap-4