Bootstrap 4 ป้องกันการคลิปบนแถวที่ล้นด้วยการเลื่อนแนวนอน

แถบเลื่อนที่ยังคงซ่อนอยู่เป็นคุณลักษณะ 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;
}

ดังที่คุณบอกว่าคุณต้องการให้เป็นแบบตอบสนองตาราง โดยค่าเริ่มต้น div ทั้งหมดจะมีความกว้างเท่ากับความกว้างที่มีอยู่ของพาเรนต์ คุณไม่ควรใช้ col-sm-4 div ที่มีคลาสนี้จะมี ความกว้าง 33.33% ของพาเรนต์ และ div อื่นๆ ของคุณจะไม่สามารถมองเห็นได้ด้วยสิ่งนี้

ดังนั้นสำหรับ div ที่ตอบสนอง คุณสามารถแก้ไขโค้ดนี้ได้ด้วยวิธีนี้ เพิ่มลิงก์สำหรับ Codepen ที่นี่

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

ซีเอสเอส

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

คุณต้องแทนที่สีและลักษณะการทำงานของแถบเลื่อนเริ่มต้น

.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