最初にすべてのブラウザー環境ではスクロールバーが常にである困難な理由は、IOS の Safari は、アイフォン専用ブラウザーのサファリのためである。過去へのクロス参照の問題を起こすとすると、IE (インターネットエクスプローラー) の投稿、過去のバージョンを引き続き使用することの問題を省略すると、今では継続的バージョンアップによってむしろに準拠したものだ。
新進気鋭の次世代の穴馬は、サファリ (Safari) は、ブラウザーである。あんまり時代遅れであり、' なぜ、この IOS のメインのブラウザーですか? ' という名前のアイデアを考えるとゴミのような、更新も自分たちだけの方向性を持つものだけがサリンかは知らなくても、ますます退化している感じである。他のすべてのブラウザーに適用され、さらにクロスを閲覧した場合、最初に考えていたインターネットエクスプローラーの以前のバージョンで動作する機能が動作しない。そして最も最悪である理由は、前述のようにこのゴミのようなブラウザーは、地球上でアンドロイドの次に最もよく使われるデバイス IOS のメインブラウザと呼ばれるポイントである (実際のものにする、多く配置していなくても、この賞金はブラウザーでは、対象行ある)。
すべての環境で常にスクロールバーが見えるコードを作成します。
つ蜂蜜運転 (GKKmon) サイトのホーム画面またはページなどで見ることができる ' 水平方向にスクロールするページの項目のメニューはすべてのブラウザー環境でテストし、参照したオブジェクトである。を作成する前に ' 精々すべてのブラウザーでスクロールバーを常に表示するのはそう難しいことは想像もしなかった。その理由は前述のようにサファリのためですが、本当にいろいろな種類の情報をひっくり返し、上キーをオフの報告、その他もろもろを使用して、アプリケーションによって바꿔보고が、アップル IOS のメインのブラウザーのサファリは、完全な機能を維持し、スクロールバーが常に見えるようにするのは不可能だった。
がつ蜂蜜運転 (GKKmon) の性格上、このようなジメジメした部分を放棄することはできないので、少し独特ですが、IOS で使用可能なコードを活用し、ファッションにもスクロールバーがあることをユーザーに認識させることができる対策を開発した。アイフォーンだけ別の方法で表示 (ただし、スクロールバーがあることをユーザーが目で見えることがある)、それ以外は正常にスクロールバーを表示することができる方法を紹介する。
優先 overflow: scroll はどのような場合でもスクロールを表示するか、overflow: hidden はどのような場合でもスクロールを非表示にするプロパティである。Overflow-x 私 overflow-y に水平スクロール、垂直スクロールバーを指定することもある。
.item{
overflow-x:scroll;
overflow-y:hidden
}
そうすると水平方向のスクロールは、常に見られ、垂直方向のスクロールは常に非表示の意味である。通常これを与えているくれたりもデスクトップに表示されているすべてのブラウザー (Chrome、IE、Firefox、Opera など) では、スクロールバーを常に表示することがある。
問題はデスクトップ上の画面を携帯電話のサイズを小さくことを確認した画面とは別の方法で、実際にモバイルで表示する場合は、overflow: hidden プロパティがあるかどうか、かたちのないものは無視し、スクロールバーを常に非表示である。のために:-webkit-scrollbar {-webkit-appearance: none;} プロパティを使用して既定のスクロールバーを非表示にするスタイルを投入する、新しいスクロールバーを作成して適用する必要が携帯電話の画面でも、常にスクロールバーを表示することがある。
予表にライン垂直スクロールバーは非表示に水平方向のスクロールバーが常にある HTM ファイルを作成し、iframe を使用して目的の位置に復帰します。
<div class="item"></div>
コンテンツ
<style type="text/css"></style>
::-webkit-scrollbar{-webkit-appearance: none;}
・ * 既定のスクロールバーを表示する * と
::-webkit-scrollbar-track-piece{background-color:#e7e7e7}
・ * 両端の矢印ボタンと本体を除く長 * ・
::-webkit-scrollbar:horizontal{height:18px;}
・ * 水平スクロールバーのサイズ、垂直方向は horizontal を vertical に変更されている * と
::-webkit-scrollbar-thumb{background-color:#a8a8a8;border-radius:10px;border:2px solid #eeeeee;}
・ * 実際に本体バー * ・
::-webkit-scrollbar-button{width:16px;background-color:#a8a8a8;}
・ * 両端矢印部分 * ・
::-webkit-scrollbar-button:start:decrement:horizontal{
・ * 水平スクロールバーの左向きの矢印の部分 * ・
width:16px;height:16px;background:#cacaca;
background-image:url(/wp-content/custom/img/larrow.png);
・ * 矢印の画像を정해줘야する * と
background-repeat:no-repeat;background-position:center center;}
::-webkit-scrollbar-button:end:increment:horizontal{
・ * 水平スクロールバーの右向きの矢印の部分 * ・
width:16px;height:16px;background:#cacaca;
background-image:url(/wp-content/custom/img/rarrow.png);
background-repeat:no-repeat;background-position:center center;}}
という名前のファイルを HTM ドキュメントとして作成し、iframe で呼び出されると、サムスンは、インターネットやクロムなど、事実上の携帯電話を除くすべてのブラウザーでスクロールバーが常に見えるようになる。Iframe に呼び出される理由は、embed にインポート時にオブジェクトがないため、メディアであると判断するので、ブラウザー (Firefox) のようなブラウザーからの閉鎖の後、この embed を表示するためのフレーズ浮かんでいるユーザーのアクセシビリティに害を与えるためである。
ファッションも目に見えるようにするには iframe を一度包まれてしなければならない。こじきのようなサファリに iframe でスクロールバーを作成する場合、自然にタッチしてドラッグで移動するのではなく、乾いていないに移動、汚れ、ドロップダウンメニューが化けたり、画面座標を変えた戻る機能を激しくすると、渋滞になるバグがあり、このバグを防ぐには iframe の外側の要素に、overflow: auto;-webkit-overflow-scrolling: touch;を必要するためである。
、Iframe はこの方法で呼び出されるようにする。
<div style="height:100px; width:100%; overflow:auto; -webkit-overflow-scrolling:touch;"></div> <iframe src="item.htm" class="item-iframe" src="item.htm" class="item-iframe"></iframe src="item.htm" class="item-iframe"> style="width:100%;height:90px;" width="100%" height="90px" frameborder="0" scrolling="yes">
他の部分はいくつかの小さなバグを排除し、確実なクロスを参照のために少しのことであり、重要なのは、iframe を他の要素で一度包み、包みの overflow: auto と-webkit-overflow-scrolling: touch を付与することである。
ここまですると、する気ないですか?のサファリだけに見てはいけない。の通しをドラッグするバグを持っていることによってその変更をしたところ、今回は-webkit-overflow-scrolling: touch を使用すると、上記で作成したが強制的に消える問題を抱えている。ので蜂蜜の運転 (GKKmon) が同じような手動での遊びがあるからこのようなサファリでも食べられるいくつかを発見し、それを通って
<style type="text/css"></style>
@media only screen and (max-device-width:35.5em) {
・ * 携帯で見えるようにする為 * ・
.item::-webkit-scrollbar{-webkit-appearance:none;}
・ * サファリのバージョンで再除去 * ・
.item::-webkit-scrollbar:horizontal{height:16px;}
・ * サファリのバージョンにし、* ・
.item::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 9px rgba(0,0,0,0.3);}
・ * それは胴体に影を与える装飾 * ・
.item::-webkit-scrollbar:horizontal{padding-left:50px;width:100%;background-color:#e7e7e7;
background-image:url(/wp-content/custom/img/rarrow50.png);
・ * サファリ用に自分で好きなだけの空白の矢印の画像を作成する、蜂蜜の運転 (GKKmon) は、横50ピクセルの末尾に矢印の画像を作成する * と
background-repeat:repeat-x;
・ * 背景の方向を横方向に繰り返す * ・
background-position:center;}}
・ * 背景の方向を垂直方向の中央に位置する * と
そう IOS のサファリには、スクロールバーと似ている背景には、50ピクセル間隔で右矢印を表示をすることによって、このオブジェクトをスクロールすることができる表示を行うことができる。
完成したコード
完全クリーンで 100% 満足できるものではありませんが、すべてのユーザーへのスクロール可能なオブジェクトであることを直観的に表現できる方法である。完成したコードは
<div class="item"></div>
コンテンツ
<style type="text/css"></style>
::-webkit-scrollbar{-webkit-appearance: none;}
・ * 既定のスクロールバーを表示する * と
::-webkit-scrollbar-track-piece{background-color:#e7e7e7}
・ * 両端の矢印ボタンと本体を除く長 * ・
::-webkit-scrollbar:horizontal{height:18px;}
・ * 水平スクロールバーのサイズ、垂直方向は horizontal を vertical に変更されている * と
::-webkit-scrollbar-thumb{background-color:#a8a8a8;border-radius:10px;border:2px solid #eeeeee;}
・ * 実際に本体バー * ・
::-webkit-scrollbar-button{width:16px;background-color:#a8a8a8;}
・ * 両端矢印部分 * ・
::-webkit-scrollbar-button:start:decrement:horizontal{
・ * 水平スクロールバーの左向きの矢印の部分 * ・
width:16px;height:16px;background:#cacaca;
background-image:url(/wp-content/custom/img/larrow.png);
・ * 矢印の画像を정해줘야する * と
background-repeat:no-repeat;background-position:center center;}
::-webkit-scrollbar-button:end:increment:horizontal{
・ * 水平スクロールバーの右向きの矢印の部分 * ・
width:16px;height:16px;background:#cacaca;
background-image:url(/wp-content/custom/img/rarrow.png);
background-repeat:no-repeat;background-position:center center;}}
<style type="text/css"></style>
@media only screen and (max-device-width:35.5em) {
・ * 携帯で見えるようにする為 * ・
.item::-webkit-scrollbar{-webkit-appearance:none;}
・ * サファリのバージョンで再除去 * ・
.item::-webkit-scrollbar:horizontal{height:16px;}
・ * サファリのバージョンにし、* ・
.item::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 9px rgba(0,0,0,0.3);}
・ * それは胴体に影を与える装飾 * ・
.item::-webkit-scrollbar:horizontal{padding-left:50px;width:100%;background-color:#e7e7e7;
background-image:url(/wp-content/custom/img/rarrow50.png);
・ * サファリ用に自分で好きなだけの空白の矢印の画像を作成する、蜂蜜の運転 (GKKmon) は、横50ピクセルの末尾に矢印の画像を作成する * と
background-repeat:repeat-x;
・ * 背景の方向を横方向に繰り返す * ・
background-position:center;}}
・ * 背景の方向を垂直方向の中央に位置する * と
この htm ファイルとして保存した後、ウェブにアップロードし、
<div style="height:100px; width:100%; overflow:auto; -webkit-overflow-scrolling:touch;"></div> <iframe src="올린 htm 파일의 URL" class="item-iframe" src="올린 htm 파일의 URL" class="item-iframe"></iframe src="올린 htm 파일의 URL" class="item-iframe"> style="width:100%;height:90px;" width="100%" height="90px" frameborder="0" scrolling="yes">
URL のみ変更することを目的の位置に挿入される。