ブロック要素のコンテンツを表示するための CSS オーバーフロー プロパティ (hidden、visible、a​​uto、scroll) とそのバリエーション。 スクロール効果

別の オペレーティングシステムデフォルトでは、ブラウザごとに異なるスクロールバーが使用されます。 しかし幸いなことに、この要素に独自の色を設定して、サイトを他のサイトより目立たせることができます。 以前、英語のサイトにアクセスしたことがありますが、サイトの色とスクロール バーの色が調和しているのがとても気に入りました。 したがって、標準以外のスクロールの色を作成する場合は、それがサイトの配色と一致していることを確認してください。

この記事では、 jQueryプラグインブラウザーで非標準のスクロールバーを作成できるようにします。 CSS プロパティただし、すべてのブラウザでサポートされているわけではありません。

ブラウザーのスクロールバーの外観を変更するこれらのプラグインを見てみましょう。

1.NiceScroll.js

NiceScroll は、iOS のようなスクロールバーを作成できる jQuery プラグインです。

2.ナノスクロール

このプラグインを使用すると、Mac OS X のように Web サイトにスクロール バーを作成できます。

3. jQueryカスタムコンテンツスクローラー

ブラウザーのスクロールバーをスタイル設定するための jQuery プラグイン CSSを使用する.

4. 小さなスクロールバー

で書かれた軽量の jQuery プラグイン jQueryを使ってライブラリ、それは与えるでしょう 美しい景色コンテンツのスクロールとメイン ブラウザ ウィンドウのスクロール バー。

5. スクロールバーの可視性

jQuery ライブラリを使用して書かれた軽量のプラグインで、ブラウザのメイン ウィンドウのコンテンツのスクロールとスクロールバーに美しい外観を与えます。

6. jScrollPane

このプラグインを使用すると、すべての環境で機能するカスタム スクロールバーを作成することもできます。 最新のブラウザ。 スタイルはCSSファイルを使用して変更できます。

7. スクロールバー用紙

このプラグインを使用すると、ブラウザのスクロールバーのスタイルを設定することはできませんが、ページ内のフレームのコンテンツにスタイルを設定できます。

8. jQuery スクロールバー v2

スクロールバーは完全にカスタマイズ可能で、ブラウザで Javascript が無効になっている場合は標準のスクロールバーも表示されます。

9.垂直スクロールバー

このプラグインでは、位置決めを使用してスクロールバーが右側に配置されるため、コンテナーの高さを固定する必要があります。

3. CSS ブロックで垂直スクロールと水平スクロールを強制する
4. スクロールのある div ブロックの例

この記事では、水平方向と垂直方向にスクロールできる固定サイズのブロック (div) を作成する問題について説明します。 これは実装できます CSSを使用する。 この責任者 オーバーフロープロパティ.

便利なオーバーフロープロパティについて

財産 オーバーフローブロック要素の内容を表示する役割を果たします。 コンテンツが完全に収まらず、ブロック領域を超えてしまう場合に使用できます。

オーバーフロー-X- ブロック要素の内容を水平方向に表示します。
オーバーフローっぽい- ブロック要素の内容を垂直方向に表示します。

CSSコード

プロクルトカ (
オーバーフロー: 自動; /* 水平スクロール用のプロパティ。 コンテンツがブロックより大きい場合は自動的に */
}

オーバーフローのプロパティと値

見える- 設定された幅の外側であっても、要素のコンテンツ全体が表示されます。
隠れた- 要素内の領域のみが表示され、残りは非表示になります。
スクロール- 水平 (y) または水平 (x) スクロールバーを強制的に追加します。
自動- 自動的に追加されました 横縞ブロックが小さい場合はスクロールします。

CSS クラスの例を考えてみましょう。 幅と高さでは、必要なブロックの幅と高さを設定します (ブロックの内容はそれを超えません)。また、オーバーフロー プロパティ: auto; を使用します。 必要に応じて水平スクロールを設定します

CSSコード

プロクルトカ (
幅:150ピクセル; /* ブロックの幅 */
高さ:100ピクセル; /* ブロックの高さ */


オーバーフロー: 自動; /* 水平スクロール用のプロパティ。 複数のブロックがある場合は自動的に */
}

CSS ブロックで強制スクロールする

高さと幅に合わせて強制的にスクロールすることもできます。 このために、各軸は次のようになります。 (垂直) オーバーフロー-x: スクロール; (水平) スクロールパラメータを指定し、スクロールを強制します。

HTML と CSS コード

プロクルトカ (
高さ:150ピクセル; /* ブロックの高さ */
背景: #fff; /* 背景色、白 */
境界線: 1 ピクセルの実線 #C1C1C1; /* ブロック境界線のサイズと色 */


}

スクロールする div の例

HTML と CSS コード

物件のひとつ オーバーフローを削除できる場合は、1 つの軸に沿ったスクロールのみが行われるため、これで十分です。
実際のスクリプトの動作を確認する 例えば下に。

著者より:ゲストのピーター・ビジネスマンズによる記事。 Peter は Audience のフロントエンド開発者で、SCSS でのライティング スタイルを楽しんでいます。 今日、彼は私が正直な CSS トリックと呼ぶものを見せてくれます。 ウェブ全体が垂直です。 このサイトは通常の本と同じように、左から右、上から下に読みます。 しかし、垂直方向から離れて、水平方向のリストを作成するというクレイジーなことをしたい場合もあります。 さらにクレイジーなのは、水平サイトです。

次のようなことができればいいでしょう:

/* 偽のコード */ div (スクロール方向: 水平; )

/* 偽のコード */ div( スクロール方向: 水平;

残念ながら、これは起こりません。 これはCSSでも計画されていません。

私が働いている会社が実際にこれを使用する可能性があるため、これはあまりにも残念です。 私たちはプレゼンテーションをたくさん行っていますが、プレゼンテーションはかなり水平的なものです。 通常、スライドのアスペクト比は 4:3 または 16:9 です。 このため、私たちは 絶え間ない問​​題水平スライドと垂直ウェブ技術を使用します。 「私たち」というのは私のことです。 しかし、私が好きなのは挑戦することです。

別の使用例

思いついたのです 具体的な方法アプリケーション。 これは、顧客がすべての製品を 1 つのスライドで表示できるようにするのが便利であるという考えです。 当然のことながら、製品カタログは 1 つの形式に収まりません。 そこで、カタログを 3 つのカテゴリーに分割し、それぞれを横スクロールにすることにしました。 したがって、最も人気のある 3 つの製品が各カテゴリに表示され、重要度の低い製品はオープンになります。 簡単にアクセスできる.

JavaScriptを使用しない方法

JS で水平スクロールを行う方法はたくさんあることは誰もが知っています。 CSS-Tricks にはいくつかの例があります。 このアイデアを実現できるかどうか疑問に思ったのですが、 純粋なCSS。 解決策は非常に簡単であることが判明しました。

要素を含むコンテナを作成します。

底端が右側になるようにコンテナを反時計回りに 90 度回転します。

コンテナ内の要素を回転させて元の位置に戻します。

ステップ 1) コンテナを作成する

作成する divブロック子要素がたくさんあります。

この例では、スクロール可能なコンテナの幅は 300 ピクセルで、100x100 ピクセルの要素が 8 つあります。 サイズは任意で、任意に設定できます。

< div class = 「水平スクロールラッパー正方形」> < div >項目1< / div > < div >項目2< / div > < div >項目3< / div > < div >項目4< / div > < div >項目5< / div > < div >項目6< / div > < div >項目7< / div > < div >項目8< / div > < / div >

コンテナの高さが幅になり、その逆も同様です。 以下では、コンテナの「幅」は 300px になります。

水平スクロールラッパー (幅: 100px; 高さ: 300px; オーバーフロー-y: 自動; オーバーフロー-x: 非表示; )

幅: 100ピクセル; 高さ: 300ピクセル; オーバーフロー -y : 自動 ; オーバーフロー -x : 非表示 ;

そして子要素:

水平スクロールラッパー > div (幅: 100px; 高さ: 100px; )

水平 - スクロール - ラッパー > div ( 幅: 100ピクセル; 高さ: 100ピクセル;

ステップ2) コンテナを回転させます

次に、CSS 変換プロパティを使用してコンテナを -90 度回転する必要があります。 横スクロールができました。

水平スクロールラッパー ( ... 変換: 回転(-90 度); 変換原点: 右上; }

水平 - スクロール - ラッパー ( . . . 変換: 回転(-90度);

小さな問題が 1 つだけあります。それは、子要素がコンテナと一緒に回転していることです。

ステップ 3) 子要素を元の場所に戻す

では、要素を元の位置に戻すにはどうすればよいでしょうか? CSS 変換プロパティを使用して元に戻します。

水平スクロールラッパー > div ( ... 変換: 回転(90 度); 変換原点: 右上; )

水平 - スクロール - ラッパー > div ( . . . 変換: 回転(90度); 変換 - 原点: 右上;

ステップ 4) 固定位置

すべてが順調に見えますが、問題がいくつかあります。

このため、コンテナを回転し、右上隅をアンカーとして設定しました。 左側コンテナの幅に合わせて移動します。 想像しにくい場合は、右側に指を置いてください。 トップコーナーページをめくってください。 終了: 変換プロパティを使用して元に戻す必要があります。

すでに良くなりました。 ただし、子要素でも同じ問題が発生するため、最初の要素はまだ表示されません。 これは、最初の子要素にその幅の値で上マージンを与えるか、すべての要素をコンテナのように変換することで修正できます。 私が見つけた最も簡単な方法は、子要素の幅に等しい上部パディングをコンテナに追加し、それによって要素のバッファ ゾーンを作成することです。

互換性

利用可能なデバイスの互換性を確認しました。

デスクトップ

スクロールバーのスタイル設定は現在 Webkit/Blink ブラウザーでのみ機能するため、Firefox と IE では通常の灰色のスクロールバーが表示されます。 これは JS を使用して完全に非表示にすることで修正できますが、これは別のレッスンで取り上げます。

マウスホイールによるスクロールはデスクトップではうまく機能します。 しかし、私のラップトップにはこの問題について独自の意見があります。 タッチ スクリーンとタッチ パッドを備えたデバイスでは、デモは div がまったく回転していないかのように動作します。

モバイルデバイス

Android はコンテナが回転したことを認識し、左右にスワイプすることでスクロールできることを知ってうれしい驚きを感じました。

逆に、iOS ではすべてがそれほどスムーズではありません。 ブラウザは、コンテナがまったく回転していないかのように動作します。 したがって、スクロールするには上下にスワイプする必要がありますが、これは非常に奇妙です。 オーバーフロー: 非表示にしても問題は解決しません。

結論

Can I Use Web サイトによると、CSS での変換は現在 93% 以上のユーザーによってサポートされています (この記事の執筆時点、2016 年 11 月)。 ここに問題はないはずです。

ただし、本番環境ではこの方法を使用しないほうがよいでしょう。 いくつかのデバイスでテストしましたが、すべてのデバイスでテストしたわけではなく、それほど徹底的ではありませんでした。

最も 大問題– タッチ入力。左右に移動するには上下にスワイプする必要があります。 解決策としては、サイトに説明付きのメッセージを書き込むことが考えられますが、その場合はユーザーがそれを読むことに頼らなければなりません。 そして、それでもそれは常識に反します。 別の解決策は、デバイス上で JS を使用してタッチ入力をキャプチャすることですが、その場合はすべてを JS で記述し、CSS ハックを完全に放棄する方が良いでしょう。

親愛なるハブラハブロビ人の皆さん、こんにちは！

ウェブサイトを常に同じように美しく見せたいと考えています。 さまざまなデバイス、モバイルのものを含む。 しかし、その行動が Androidブラウザはほぼ予測可能ですが、iOS では多くの「驚き」が生じます。 今日はそれらについて話しましょう!

いくつかの例はすでに Habré で公開されていますが、それでも記事に含めることにしました。 記事を2つの部分に分けて説明します。 1 つ目では、Webkit に役立つ CSS プロパティのリストを示し、2 つ目では、iOS Safari のコーディング時に発生する問題の修正について説明します。

プロパティ

1. -webkit-overflow-scrolling: タッチ

この CSS プロパティは、overflow:scroll を使用してブロック内のスムーズなスクロールを追加します。 モバイル メニューなど、ブロック内でスクロールが発生する可能性がある場所には必ずこのプロパティを追加することをお勧めします。

Ov-scroll( overflow-y: auto; -webkit-overflow-scrolling:touch; )
2. -webkit-text-size-adjust: なし

横向きのテキストの拡大縮小を無効にします。

Body( -webkit-text-size-adjust: none; )
例：

3. -webkit-tap-highlight-color: #ccc

アクティブな要素をタップしたときのその要素のハイライト色を設定します (a、ラベル)。 デフォルトは 灰色, 多くの場合、役に立たなかったり、全体のデザインから目立ってしまうことがあります。

A、label( -webkit-tap-highlight-color: 透明; )
そのような選択の例:

4. -webkit-Appearance: なし

システム スタイル要素 (影、境界線半径など) のオーバーレイを無効にします。 入力 (すべてではない)、テキストエリアなどに適用されます。 すべてのデバイスの要素に単一の外観を設定する必要がある場合に便利です。

入力、入力、テキストエリア( -webkit-Appearance: none; )
Safariのレイアウトだけでなく使用されています。

5. (ポインタ:粗い)

このメディア クエリを使用すると、タッチをサポートするデバイスにのみスタイルを個別に指定できます。 したがって、タッチ デバイスでは、これらのタイプのデバイスに不要なアニメーションを無効にすることができます。

@media (ポインタ:粗い)( ... )
Safariのレイアウト以外にも使えます。

修正

1. 背景添付: 修正済み

問題：背景添付ファイル: iOS Safari で動作しない問題を修正しました。

解決：背景ではなく、ブロックまたは疑似要素を修正します。

Body:before ( content: ""; 背景画像: url(...); 位置: 固定; 左: 0; 右: 0; 上: 0; 下: 0; z-index: -1; )
2. 不要なモーダルウィンドウのスクロール

問題：これはかなり稀なケースですが、 一般情報、知っておくと同じくらい役に立つと思います。 モーダル ウィンドウに独自のスクロールがあり、閉じた状態で負の Z インデックスが単純に設定されている場合 (たとえば、不透明度: 0)、ページをスクロールしようとすると、モーダル ウィンドウがスクロールを中断する可能性があります。 その結果、ページはスクロールしなくなります。

解決：閉じた状態のモーダル ウィンドウに pointer-events: none を追加します。

Modal( 位置: 固定; Z インデックス: -9; 上: 0; 下: 0; 左: 0; 右: 0; 不透明度: 0; ポインターイベント: なし; )
3. スクロールするとメニューが消える
ページをスクロールするときにメニューを画面の上端に「貼り付ける」には、次のテクニックがよく使用されます。 初期状態では、メニューにはプロパティ「position:Absolute」があり、ウィンドウの上端に達すると、js を介して「fixed」に変更されます。 ページを先頭までスクロールすると、値は再び絶対値に変わります。

問題： iOS の Safari で、位置を固定から絶対に変更すると、スクロールが完了するまでメニューが画面から消えます。

解決：メニューの位置を使用します: -webkit-sticky。 メニューの動作は上記と同様ですが、何も消えません。 さらに、js を使用する必要はありません

Nav( ......... 位置: 絶対; ) .nav_fix( 位置: 固定; ) @supports ((位置:sticky) または (位置:-webkit-sticky))( .nav, .nav_fix( 位置: -webkit-sticky 位置: スティッキー;
ちなみに、positionプロパティのsticky値がサポートされるようになりました。 多額のブラウザに対応しているため、デスクトップブラウザでも使用できます。

4. 位置付きブロック: スクロール時に修正

ソリューションを実装する場合 以前の問題その時、いくつかのサイトで見たのですが、 この問題ウェブサイトには常に表示されます。

問題：ブラウザをスクロールすると画面の高さが変わります。 したがって、メニューが開いている場合、または モーダルウィンドウスクロールをブロックしないと、同様の効果が発生します。

解決：変換を使用して次の「トリック」を実行する必要があります。

Nav( 位置: 固定; 左: 0; 右: 0; 下: 0; 上: -70px; パディング-下: 70px; 変換: translationY(70px); )
70px の値は、ウィンドウの高さの変化の違いをカバーします。 この状況で要素の背景を画面の外に描画できるのは、transform のみです。

結論

ただし、特に結論はありません。そのまま使用してください) 他に実際に適用できる便利な CSS プロパティや「修正」を知っている場合は、コメントに書き込んでください。

ご清聴ありがとうございました！

アップデート
プロパティのパラグラフ 5 が変更されました。

カスタム スクロールバーは人気が高まっており、サイトをよりスタイリッシュに見せるユニークなスクロールバーを備えた Web サイトに遭遇したことがあるでしょう。

カスタム スクロールバーを実装するには、いくつかの方法があります。 このチュートリアルでは、CSS3 を使用します。 簡単な方法で。 もちろん、スクロールバーのカスタマイズに役立つ jQuery プラグインはありますが、サイトに大量の JavaScript を追加するのは好きではありません。 あなたがデザイナーや写真家である場合、または単に Web サイトにクールなスクロールバーが必要な場合は、jQuery プラグインを使用してください。

カスタム スクロールバーは、接頭辞が付いた CSS プロパティを使用して構成されていることを知っておく必要があります。 -ウェブキット Webkit (および Blink) レンダリング エンジンを使用するブラウザーで。

始める前に、スクロールバーの構成を見てみましょう。

用語

スクロールバーは 7 つで構成されます さまざまな要素:

::-webkit-scrollbar ( /* 1 - スクロールバー */ ) ::-webkit-scrollbar-button ( /* 2 - ボタン */ ) ::-webkit-scrollbar-track ( /* 3 - トラック */ ) : :-webkit-scrollbar-track-piece ( /* 4 - トラックの表示部分 */ ) ::-webkit-scrollbar-thumb ( /* 5 - スライダー */ ) ::-webkit-scrollbar-corner ( /* 6 - コーナー */ ) ::-webkit-resizer ( /* 7 - ウィンドウのサイズ変更 */ )

用語については理解できたので、始めましょう。

設定

ファイルの作成 インデックス.htmlそして スタイル.css。 で インデックス.html以下を入れてください:

さあ始めましょう スタイル.css

まずは授業の準備をします 。スクロール・バー width 、 height 、 background-color 、次に overflow-y を設定します: スクロールして取得します 縦縞スクロール。 クラスの要素に min-height: 450px を設定します。 .force-オーバーフロースクロール バーが表示されるようにします (クラス内のスクロールに overflow-y プロパティを使用したため) 。スクロール・バー).

スクロールバー (背景色: #F5F5F5; フロート: 左; 高さ: 300px; マージン-下: 25ピクセル; マージン-左: 22ピクセル; マージン上: 40ピクセル; 幅: 65ピクセル; オーバーフロー-y: スクロール; ) .force-overflow (最小高さ: 450px; )

今私たちが使っているのは ::-ウェブキットスクロールバースクロールバーのスタイルを設定します。 デフォルトの幅が新しい幅 6px と背景色 #F5F5F5 に置き換えられます。

#style-1::-webkit-scrollbar (幅: 6px; 背景色: #F5F5F5; )

次に、スライダーの外観をより魅力的なものに変更します。 擬似要素を使用します（つまり、 ::- webkit-スクロールバー-サム) を選択し、スライダーの色 (background-color) を設定します。

#style-1::-webkit-scrollbar-thumb (背景色: #000000; )

これらの操作を行うと、スライダーは次のようになります。

以上です。気に入っていただければ幸いです。