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

Answer 2

As you said that you want it as table-responsive in which all the divs by default take equal width of the available width of the parent, then you shouldn't use col-sm-4. The divs with this class will have 33.33% width of the parent and your others divs will surely not visible with this.

So for responsive divs you can edit this code in this way. 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 3

You need to override the default scroll bar colors and behaviour

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

Otherwise you could do it with JS instead of css