News

Home News スクロールコンテナ

スクロールコンテナ

長いコンテンツを小さいブロック収めるスクロールコンテナ(インラインフレーム)スクロールバーをスタイリングする。

クラスc-scrollcontainerを付与した要素で括ると、高さ400pxよりはみ出したコンテンツはスクロールコンテンツになる。

プライバシーポリシー

Lopan.jp(以下「当サイト」といいます)は、個人情報の重要性を認識し、個人情報を保護することが社会的責務であると考えます。
個人情報に関する法令を遵守し、当サイトで取り扱う個人情報の取得、利用、管理を適正に行います。

適応範囲

本プライバシーポリシーは、お客様の個人情報、もしくはそれに準ずる情報を取り扱う際に、当サイトが遵守する方針を示したものです。

個人情報の取得

当サイトでは、お客様から無断で個人情報を取得することはありません。
ご提供いただいた個人情報は、質問やお問い合わせに対して回答する場合や、必要最低限の情報を電子メールなどでご連絡する場合にのみ利用するものであり、個人情報をご提供いただく際の目的以外では利用いたしません。

個人情報の利用

お客様個人、もしくは第三者の権利・利益を害する場合やお客様の同意がある場合などを除き、お客様との連絡目的以外で利用することはありません。
また、法令に基づく命令などを除き、お客様の同意なく第三者に提供することもありません。

個人情報の管理

当サイトは、個人情報の正確性及び安全確保のために、セキュリティ対策を徹底し、個人情報の漏洩、改ざん、不正アクセスなどの危険については、必要かつ適切なレベルの安全対策を実施します。
当サイトは、第三者に重要な情報を読み取られたり、改ざんされたりすることを防ぐために、SSLによる暗号化を使用しております。

Cookie(クッキー)

CookieとはWebサイト閲覧情報を、利用しているブラウザに記憶させておく機能のことです。
ブラウザの設定により、Cookieを無効にし、閲覧情報の収集をブロックすることも可能です。詳しくはお使いのブラウザの設定をご確認ください。

ただし、Cookieを拒否した場合、当サイトのいくつかのサービス・機能が正しく動作しない場合があります。

アクセス解析

当サイトでは、サイトの分析と改善のためにGoogleが提供している「Google アナリティクス」を利用しています。
このサービスは、トラフィックデータの収集のためにCookieを使用しています。トラフィックデータは匿名で収集されており、個人を特定するものではありません。

広告配信

当サイトでは、第三者配信の広告サービス「Google アドセンス」を利用しています。
広告配信事業者は、利用者の興味に応じた広告を表示するためにCookieを使用することがあります。これによって利用者のブラウザを識別できるようになりますが、個人を特定するものではありません。
Cookieを無効にする方法や「Google アドセンス」に関する詳細は、https://policies.google.com/technologies/ads?gl=jpをご覧ください。

免責事項

当サイトのコンテンツ・情報について、可能な限り正確な情報を掲載するよう努めておりますが、常に正確性や安全性を保証するものではありません。
当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。

リンク

当サイトへのリンクは原則自由です。リンクを行う場合の許可や連絡は不要です。引用する際は引用元のURLを記載ください。
ただし、画像ファイルへの直リンク、iframeを使用する形でのリンクはご遠慮ください。

ポリシーの変更

当サイトは、個人情報に関して適用される日本の法令を遵守するとともに、ポリシーの内容を適宜見直しその改善に努めます。
本プライバシーポリシーは、事前の予告なく変更することがあります。修正された最新のプライバシーポリシーは常にこのページにて開示します。

<section class="c-scrollcontainer"> <h1 class="c-title -sand">プライバシーポリシー</h1> <p class="c-lead">Lopan.jp(以下「当サイト」といいます)は、個人情報の重要性を認識し、個人情報を保護することが社会的責務であると考えます。<br>個人情報に関する法令を遵守し、当サイトで取り扱う個人情報の取得、利用、管理を適正に行います。</p> ︙ <p>当サイトへのリンクは原則自由です。リンクを行う場合の許可や連絡は不要です。引用する際は引用元のURLを記載ください。<br>ただし、画像ファイルへの直リンク、iframeを使用する形でのリンクはご遠慮ください。</p> <h2 class="c-title -hyphen -s">ポリシーの変更</h2> <p>当サイトは、個人情報に関して適用される日本の法令を遵守するとともに、ポリシーの内容を適宜見直しその改善に努めます。<br>本プライバシーポリシーは、事前の予告なく変更することがあります。修正された最新のプライバシーポリシーは常にこのページにて開示します。</p> </section>

スクロールバーのスタイルを指定するCSSは以下の通り。
scrollbar-widthプロパティscrollbar-colorプロパティはFirefox用の指定。あとの擬似要素を使った書き方の::-webkit-scrollbar::-webkit-scrollbar-track::-webkit-scrollbar-thumbがWebKit(Safari/Chrome)用の指定。

.c-scrollcontainer { overflow: auto; scrollbar-width: thin; scrollbar-color: #dadcde #fafafd; -webkit-overflow-scrolling: touch; } .c-scrollcontainer::-webkit-scrollbar { width: 8px; height: 8px; } .c-scrollcontainer::-webkit-scrollbar-thumb { border-radius: 8px; background: #dadcde; } .c-scrollcontainer::-webkit-scrollbar-track { border-radius: 8px; background: #eeeff1; } @media (hover: hover) { .c-scrollcontainer::-webkit-scrollbar-thumb { transition: background .4s; } .c-scrollcontainer::-webkit-scrollbar-thumb:hover { background: #c2c4ca; transition-duration: .1s; } }

コンポーネント自体に高さの指定はなく、ページごとのCSSファイルで制限する。

.p-scrollcontainer .c-scrollcontainer { max-height: 400px; max-width: 800px; margin-inline: auto; padding: 40px; }