Bootstrap 4防止通过水平滚动裁剪溢出的行

Question

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

我使用了以下问题的答案：Bootstrap 4水平滚动器div

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

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

编辑：

相关的代码来自此答案，并已发布在codepen上。

编辑2：

请注意，我要防止容器在滚动状态下移动。

Answer 1

保持隐藏的滚动条是 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;
}