Bootstrap 4 mencegah kliping pada baris yang meluap dengan gulir horizontal

Saya membuat row dengan pengguliran horizontal untuk semua yang ada di col.

Saya menggunakan jawaban untuk pertanyaan ini: Bootstrap 4 div scroller horizontal

Namun, saya menemukan bahwa elemen di dalam container terpotong. Sekarang pada beberapa kombinasi OS-Browser (misalnya MacOS+Chrome) scrollbar disembunyikan kecuali jika diarahkan oleh mouse dan dalam pengujian salah satu pengguna kami tidak dapat menemukan elemen col berikutnya (terpotong).

Saya ingin tahu cara "melepaskan" elemen di luar lebar wadah, sehingga pengguna dapat segera melihat bahwa ada lebih banyak konten yang perlu digulir.

Sunting:

Kode terkait berasal dari jawaban ini, dan juga diposting di kodepen.

Sunting 2:

Perhatikan, saya ingin mencegah wadah dipindahkan saat digulir.


scroll css bootstrap-4 clipping overflow
person Jankapunkt    schedule 11.03.2019    source sumber
comment
Bisakah Anda memposting kode yang sudah Anda coba?   -  person Zim    schedule 11.03.2019
comment
Kode tersebut ada dalam pertanyaan tertaut dan saya tidak menyalinnya karena saya tidak ingin berpura-pura itu adalah kode saya.   -  person Jankapunkt    schedule 11.03.2019
comment
Saya tidak begitu mengerti pertanyaannya. Apakah maksud Anda terpotong karena pengguliran horizontal?   -  person Zim    schedule 11.03.2019
comment
Elemen di luar lebar container disembunyikan (apakah istilah yang tepat untuk itu terpotong?) dan saya ingin membuatnya tetap terlihat sehingga orang dapat melihat, bahwa ada lebih banyak elemen yang dapat dijangkau saat menggulir secara horizontal.   -  person Jankapunkt    schedule 11.03.2019
comment
Saya memperbarui pertanyaan saya, karena tautannya terlalu tidak spesifik.   -  person Jankapunkt    schedule 11.03.2019
comment
Apakah Anda ingin membuat bilah gulir horizontal terlihat di semua browser atau menunjukkan dengan cara tertentu bahwa ada lebih banyak konten di sisi kanan yang dapat digulir?   -  person Siavas    schedule 16.03.2019
comment
Yang kedua tetapi tanpa menggulir seluruh halaman.   -  person Jankapunkt    schedule 16.03.2019

Jawaban (3)


arrow_upward
2
arrow_downward

Scrollbar yang tetap tersembunyi adalah fitur OSX yang harus tidak digunakan oleh pengguna jika mereka ingin scrollbar tetap terlihat. Tidak banyak yang dapat Anda lakukan untuk memaksa mereka tetap terlihat. Tapi Anda bisa menatanya secara eksplisit sehingga chrome dan safari setidaknya akan ditampilkan.

Anda dapat menguji Mac Os dan kombo chrome/safari, karena ini adalah masalah khusus platform. Kemudian Anda dapat mengganti gaya untuk bilah gulir. Ini memaksanya untuk ditampilkan.

.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;
}
person Steven Kuipers    schedule 18.03.2019
comment
Scrollbar di OSX saya juga tersembunyi di Firefox dan Safari saat membuka codepen dari pertanyaan. Menambahkan css yang Anda posting membuat scrollbar benar-benar hilang =0 (Reproduksi: OSX 10.14.3, Chrome 72.0.3626.119, FF 65.0.1, Safari 12.0.3) - person Jankapunkt; 18.03.2019
comment
Ah ya karena saya juga mengatur overflow-x untuk menggulir. Saya mengedit posting saya untuk memperjelas. - person Steven Kuipers; 18.03.2019
comment
Ini berhasil. Namun saya ingin menunggu hingga akhir periode bounty untuk melihat apakah masih ada solusi yang mencegah elemen terpotong saat pengguliran aktif. Jika tidak ada jawaban yang masuk akal, saya akan menerima jawaban ini sebagai solusi kompromi. - person Jankapunkt; 18.03.2019
comment
Ya silakan biarkan terbuka, jika ada cara lain untuk memaksa scrollbar di OSX saya ingin mengetahuinya juga. - person Steven Kuipers; 18.03.2019

arrow_upward
1
arrow_downward

Seperti yang Anda katakan bahwa Anda menginginkannya sebagai tabel-responsif di mana semua div secara default mengambil lebar yang sama dari lebar induk yang tersedia, maka Anda tidak boleh menggunakan col-sm-4. Div dengan kelas ini akan memiliki lebar 33,33% induknya dan div Anda yang lain pasti tidak akan terlihat dengan ini.

Jadi untuk div responsif Anda dapat mengedit kode ini dengan cara ini. Tautan untuk Codepen ditambahkan di sini.

<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; }
person Techie_T    schedule 15.03.2019
comment
Terima kasih atas kontribusi anda. Sayangnya hal ini juga menyebabkan penampung dipindahkan dengan pengguliran horizontal. Referensi ke table-responsive hanya untuk memberikan contoh bagaimana seharusnya berperilaku. - person Jankapunkt; 15.03.2019
comment
Saya baru saja memeriksa dan menurut saya table-responsive adalah referensi yang buruk di sini. Saya hanya ingin mencegah kliping saat menggulir. - person Jankapunkt; 15.03.2019

arrow_upward
1
arrow_downward

Anda perlu mengganti warna dan perilaku bilah gulir default

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

Kalau tidak, Anda bisa melakukannya dengan JS, bukan css

person mooga    schedule 20.03.2019
comment
Tapi ini juga hanya memanipulasi scrollbar. Ini bisa menjadi solusi alternatif tetapi saya masih ingin melihat apakah kliping tersebut dapat dielakkan. - person Jankapunkt; 20.03.2019
comment
Saya pikir ini lebih merupakan masalah ux daripada masalah kode. Anda memiliki beberapa konten yang bergulir ke samping tanpa ada indikasi bahwa pengguliran dapat dilakukan. Scrollbar adalah indikasi yang baik, tetapi OSX telah menghapusnya, dan meskipun Anda dapat memaksanya kembali ke webkit, FF masih tersisa. Tampaknya Anda ingin kemungkinan gulir menjadi jelas saat pengguna mulai berinteraksi dengan elemen. Sehingga masih menyisakan kemungkinan untuk tidak ketahuan. Mengapa tidak mengekspos sedikit saja dari kotak ke-4. - person Kjetil Hansen; 21.03.2019
comment
Mengekspos kotak ke-4 sudah ada di pikiran saya, tetapi bagaimana mencapainya dengan grid Bootstrap berukuran 12 dengan elemen di bawah 5? - person Jankapunkt; 21.03.2019