はじめに
この実験では、CSS を使って要素にスクロールバーを非表示にしながら、依然としてスクロール可能にするという概念を探ります。スクロールを有効にするためにoverflow: autoプロパティを使い、Firefox ではscrollbar-width: noneを使ってスクロールバーを非表示にし、WebKit ブラウザでは::-webkit-scrollbar疑似要素にdisplay: noneを使ってスクロールバーを非表示にします。この実験では、この CSS テクニックを実装して、スクロール可能な要素のユーザーエクスペリエンスを向上させるための実践的な経験を提供します。
これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この 初級 レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。
スクロールバーを非表示にする
VM 内には既にindex.htmlとstyle.cssが用意されています。
要素にスクロールバーを非表示にしながらスクロール可能にするには、次の手順に従います。
- 要素にスクロールを有効にするために
overflow: autoを使用します。 - Firefox でスクロールバーを非表示にするために
scrollbar-width: noneを使用します。 - WebKit ブラウザ（Chrome、Edge、Safari など）でスクロールバーを非表示にするために
::-webkit-scrollbar疑似要素にdisplay: noneを使用します。
以下は実装例です。
<div class="scrollable">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum id
leo a consectetur. Integer justo magna, ultricies vel enim vitae, egestas
efficitur leo. Ut nulla orci, rutrum eu augue sed, tempus pellentesque quam.
</p>
</div>
.scrollable {
width: 200px;
height: 100px;
overflow: auto;
scrollbar-width: none;
}
/* Hide scrollbars on WebKit browsers */
.scrollable::-webkit-scrollbar {
display: none;
}
右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080タブを更新してウェブページをプレビューできます。
まとめ
おめでとうございます！あなたは「スクロールバーを非表示にする」実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を行って練習してください。