row含まれているすべてのを水平スクロールで作成しましたcol。
私はこの質問への答えを使用しました：Bootstrap4水平スクローラーdiv
しかし、内部の要素containerがクリップされていることがわかりました。一部のOS-ブラウザの組み合わせ（MacOS + Chromeなど）では、マウスでホバーされない限りスクロールバーが非表示になり、テストでユーザーの1人が次の（クリップされた）col要素を見つけることができませんでした。
コンテナの幅を超えて要素を「クリップ解除」する方法を知りたいので、ユーザーはスクロールが必要なコンテンツがまだあることをすぐに確認できます。
編集：
関連するコードはこの回答からのものであり、codepenにも投稿されています。
編集2：
コンテナがスクロール時に移動しないようにしたいことに注意してください。
スクロールバーを非表示のままにするのはOSXの機能であり、ユーザーがスクロールバーを表示したままにする場合はオプトアウトする必要があります。それらを表示したままにするためにできることはあまりありません。ただし、少なくともクロムとサファリが表示されるように、明示的にスタイルを設定することはできます。
これはプラットフォーム固有の問題であるため、MacOSと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;
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加