2017-02-07 6 views
-2

私はラッパーと、ラッパーの子要素としてインナーラッパーを持っています。内部ラッパーはラッパーの内部をスクロールし、可視性を隠す必要があります。CSS - 可視性を持つ要素:hiddenはスクロールしません。

これは、コンピュータのブラウザで正常に動作します。しかし、モバイルブラウザでページを開くと、内部ラッパーはスクロールしません。

何が問題ですか?

HTML:

<div id="wrapper"> 
    <div id = "inner-wrapper"> 
    <div id = "circle"></div> 
    <div id = rectangle></div> 
    </div> 
</div> 
<button> 
    button 
</button> 

はCSS:

#wrapper{ 
    position: fixed; 
    top: 0px; 
    width: 1px; 
    height: 200px; 
    z-index: 99999999; 
} 

#inner-wrapper{ 
    width: 300px; 
    height: 200px; 
    overflow: auto; 
    z-index: 99999999; 
} 
#circle{ 
    height: 300px; 
    width: 300px; 
    border-radius: 100%; 
    background-color: black; 
    z-index: 99999999; 

} 
#rectangle{ 
    margin-top: 100px; 
    height: 200px; 
    width: 300px; 
    background-color: red; 
    z-index: 99999999; 

} 
button{ 
    z-index: 1; 
    background-color: white; 
} 

https://jsfiddle.net/934v8g69/

+0

一部のモバイルブラウザでは、ページ全体以外のスクロールはサポートされていません。 – Pointy

+0

inner-wrapperのプロパティvisibility:visibleを設定すると、スクロールします。ただし、プロジェクトの仕様によると、このプロパティの値は正しくありません。 – themis93

答えて

3

あなたは次のプロパティを使用して検討してください。

-webkit-overflow-scrolling: touch; 

も設定してください:

overflow:scroll; 
+0

このプロパティは私を助けてくれませんでした。 – themis93

+0

コードスニペットを提供できますか?また、少し上手くいくために何をしようとしているのか理解してもらえますか? –

+0

私は質問にコードを追加しました。ご覧のとおり、ボタンは表示されていますが、クリックすることはできません。この問題は、プロパティの可視性を使用すると解決されます。inner-wrapperで隠され、visibility:円と四角で表示されます。しかし、これは携帯電話では機能しません。 – themis93

関連する問題