iOSでCSSオーバーフローを使用してスクロールバーを取得する方法

Question 1

iPad Webサイトの開発CSSプロパティを使用して、overflow: auto必要に応じてスクロールバーを取得しようとしましたdivが、2本の指のスクロールが機能していても、デバイスはスクロールバーを表示しません。

で試しました

overflow: auto;

そして

overflow: scroll;

結果は同じです。

私はiPadでのみテストしています（デスクトップブラウザでは完全に機能します）。

何か案は？

Question 2

kritzikratziによる、親切に残されたコメントに従って編集してください：

[開始] ios 5betaでは、新しいプロパティ-webkit-overflow-scrolling: touchを追加できます。これにより、期待どおりの動作が得られます。

いくつかの、しかしごくわずかな、さらなる読み物：

iOS5でのネイティブの勢いのスクロール

元の答え、後世のために残されました。

残念ながら、iOSデバイスではoverflow: auto、またはのどちらもscrollスクロールバーを生成しません。これは、明らかにそのような便利なメカニズムを使用する画面幅が原因です。

代わりに、ご存知のように、ユーザーはoverflow-edコンテンツをスクロールするために、2本の指でスワイプする必要があります。唯一の参考資料は、電話自体のマニュアルが見つからないため、ここにあります：tuaw.com：iPhone 101：2本指のスクロール。

これについて私が考えることができる唯一の回避策は、JavaScriptやjQTouchを使用して、overflow要素用の独自のスクロールバーを作成できるかどうかです。または、@ mediaクエリを使用して、を削除しoverflow、コンテンツを完全に表示することもできます。iPhoneユーザーとして、これは非常に単純である場合に限り、私の投票を取得します。例えば：

<link rel="stylesheet" href="handheld.css" media="only screen and (max-device width:480px)" />

上記のコードは、上記にリンクされている同じ記事のA List Apartからのものです（なぜそれらが離れたのかはわかりませんtype="text/css"が、理由があると思います。

Question 3

このコードをCSSに適用します

::-webkit-scrollbar{

    -webkit-appearance: none;
    width: 7px;

}

::-webkit-scrollbar-thumb {

    border-radius: 4px;
    background-color: rgba(0,0,0,.5); 
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

Question 4

私はいくつかのテストを行い、スクロールバーの動作を再定義するCSS3を使用して、あなたはあなたの手にするきOverflow:scroll;かOverflow:auto

私はこのようなものになってしまいました...

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
    border-bottom: 1px solid #eee; 
    border-top: 1px solid #eee;
}
::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #C3C3C3;
    border: 2px solid #eee;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); 
}

私がまだ理解できていない唯一の欠点は、iProductsのスクロールバーを操作する方法ですが、コンテンツを操作してスクロールすることはできます

Question 5

ここでクリスバーによって与えられた解決策

function isTouchDevice(){
    try{
        document.createEvent("TouchEvent");
        return true;
    }catch(e){
        return false;
    }
}

function touchScroll(id){
    if(isTouchDevice()){ //if touch events exist...
        var el=document.getElementById(id);
        var scrollStartPos=0;

        document.getElementById(id).addEventListener("touchstart", function(event) {
            scrollStartPos=this.scrollTop+event.touches[0].pageY;
            event.preventDefault();
        },false);

        document.getElementById(id).addEventListener("touchmove", function(event) {
            this.scrollTop=scrollStartPos-event.touches[0].pageY;
            event.preventDefault();
        },false);
    }
}

私にとってはうまくいきます。いくつかのクリックを使用する必要がある場合は、event.preventDefaultを削除してください...

Question 6

iScroll4 JavaScriptライブラリは、すぐにそれを修正します。それは持っているhideScrollbarあなたがするように設定できるという方法false消えてから、スクロールバーを防ぐために。

Question 7

SOの他の2人は、問題に対する可能なCSSのみの解決策を提案しました。David Thomasのソリューションは完璧ですが、スクロール中にのみスクロールバーが表示されるという制限があります。

スクロールバーを常に表示するために、次のリンクで提案されているガイドラインに従うことができます。

Question 8

あなたの体とdivが持っていないことを確認してください

  position:fixed

そうでなければそれは機能しません

Question 9

私の経験では、要素が機能するようにdisplay:block;適用されていることを確認する必要があります-webkit-overflow-scrolling:touch;。

Question 10

私にとっては問題なく動作します。試してみてください。

.scroll-container {
  max-height: 250px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

Question 11

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #C3C3C3;
    border: 2px solid #eee;
}

このコードを使用すると、ios / android APPwebviewで機能します。移植性のないCSSコードを削除します。

Question 12

モバイルでタッチを使用して水平divスクロールを実現しようとしている場合、更新されたCSS修正は機能しません（AndroidChromeおよびiOSSafariの複数のバージョンでテスト済み）。例：

-webkit-overflow-scrolling: touch

私は解決策を見つけ、CSSトリックの前から水平スクロール用に修正しました。AndroidChromeとiOSSafariでテストしましたが、リスナーのタッチイベントは長い間行われているため、サポートは良好です：http：//caniuse.com/#feat=touch。

使用法：

touchHorizScroll('divIDtoScroll');

関数：

function touchHorizScroll(id){
    if(isTouchDevice()){ //if touch events exist...
        var el=document.getElementById(id);
        var scrollStartPos=0;

        document.getElementById(id).addEventListener("touchstart", function(event) {
            scrollStartPos=this.scrollLeft+event.touches[0].pageX;              
        },false);

        document.getElementById(id).addEventListener("touchmove", function(event) {
            this.scrollLeft=scrollStartPos-event.touches[0].pageX;              
        },false);
    }
}
function isTouchDevice(){
    try{
        document.createEvent("TouchEvent");
        return true;
    }catch(e){
        return false;
    }
}

垂直ソリューションから変更（CSSトリック以前）：

http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/