web-dev-qa-db-ja.com

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

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

私が試した

overflow: auto;

そして

overflow: scroll;

結果は同じです。

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

何か案は？

cssipadios
77
mat_jack1

Edit左コメントの後に、親切に kritzikratzi で：

[開始] iOS 5ベータ版では、新しいプロパティ-webkit-overflow-scrolling: touchを追加できます。これにより、期待される動作が得られます。

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

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

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

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

私がこれについて考えることができる唯一の回避策は、overflow要素用の独自のスクロールバーを作成するために、おそらくJavaScriptとjQTouchを使用できる場合です。または、 @ mediaクエリ を使用してoverflowを削除し、コンテンツを完全に表示することもできます。iPhoneユーザーとしては、単純な理由だけで、これが私の投票権を得ます。例えば：

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

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

113
David Thomas

いくつかのテストを行い、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のスクロールバーを操作する方法ですが、コンテンツを操作してスクロールすることです

19
Vex_man

このコードを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);
}
18
Prafull

Chris Barrによる解決策 ここ

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を削除します...

6
mikmikmik

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

  position:fixed

それ以外は動作しません

2
Matoeil

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

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

2
Luca Detomi

iScroll4 javascriptライブラリは、それをすぐに修正します。 hideScrollbarメソッドがあり、falseに設定して、スクロールバーが消えないようにすることができます。

2
Dan Gayle
::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

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

このコードを使用すると、ios/Android APPウェブビューで機能します。移植性のないCSSコードを削除します。

1
junfeng_feng

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

1
camslice

私のためにうまくいきます、試してください：

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

モバイルでタッチしてhorizo​​ntal div scrollingを達成しようとしている場合、更新されたCSS修正は機能しません（Android ChromeおよびiOS Safariの複数バージョン）、例：

-webkit-overflow-scrolling: touch

私は解決策を見つけ、CSSトリックの前から水平スクロール用に修正しました。 Android ChromeとiOS Safariでテストしましたが、リスナータッチイベントは長い間存在していたため、良好なサポートがあります。 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/

0
Steve Seeger