Bootstrap 4 prevent clipping on overflowing row with horizontal scroll

Question

I created a row with horizontal scrolling for all contained col.

I used an answer to this question: Bootstrap 4 horizontal scroller div

However, I found that the elements inside the container are clipped. Now on some OS-Browser combinations (e.g. MacOS+Chrome) the scrollbar is hidden unless it is hovered by the mouse and in a test one of our users was not able to find the next (clipped) col element.

I'd like to know how to "unclip" the elements beyond the container width, so that user can immediately see that there is more content that requires scrolling.

Edit:

The related code is from this answer, and also posted on codepen.

Edit 2:

Note, that I want to prevent the container from being moved on scroll.

Answer 1

The scrollbars staying hidden is an OSX feature that users have to opt-out from if they want scrollbars to stay visible. There is not much that you can do to force them to stay visible. But you could style them explicitly so chrome and safari will show then at least.

You could test for Mac Os and chrome / safari combo, as this is a platform specific problem. Then you can override the styling for the scrollbar. This forces it to be shown.

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