css - Bootstrap 4 防止水平滚动溢出行的裁剪

Question

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

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

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

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

编辑:

相关代码来自this answer , 并且还张贴在 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;
}