web-dev-qa-db-ja.com

overflow：hiddenはiPhone Safariで<body>に適用されますか？

overflow:hiddenに適用される<body>はiPhone Safariで機能しますか？そうではないようです。それを達成するためにウェブサイト全体にラッパーを作成することはできません...

あなたは解決策を知っていますか？

例：長いページがあり、「フォールド」の下にあるコンテンツを非表示にしたいだけで、iPhone/iPadで機能するはずです。

iphonecssipadsafarioverflow
115
Francesco

同様の問題があり、overflow: hidden;をhtmlとbodyの両方に適用すると問題が解決することがわかりました。

html,
body {
    overflow: hidden;
}

IOS 9の場合、代わりにこれを使用する必要があります：（Thanks chaenu！）

html,
body {
    overflow: hidden;
    position: relative;
    height: 100%;
}
103
Alex Haas
body {
  position:relative; // that's it
  overflow:hidden;
}
77
laFunk

ここにリストされたいくつかの解決策は、弾性スクロールを伸ばすときにいくつかの奇妙なグリッチを持っていました。私が使用したことを修正するには：

body.lock-position {
  height: 100%;
  overflow: hidden;
  width: 100%;
  position: fixed;
}

ソース： http://www.teamtownend.com/2013/07/ios-prevent-scrolling-on-body/

25
Davey

今日iOS 8および9でこの問題が発生したため、高さを100％追加する必要があるようです。

だから追加

html,
body {
  position: relative;
  height: 100%;
  overflow: hidden;
}
8
chaenu

ここでの回答とコメントを組み合わせて、 この類似の質問 私のために働いた。

全体の回答として投稿します。

<body>タグ内に、サイトコンテンツの周囲にラッパーdivを配置する方法を次に示します。

 <!DOCTYPE HTML>
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <!-- other meta and head stuff here -->
 <head>
 <body>
     <div class="wrapper">
         <!-- Your site content here -->
     </div>
 </body>
 </html>

以下のようにラッパークラスを作成します。

.wrapper{
    position:relative; //that's it
    overflow:hidden;
}

この回答はこちら からもアイデアを得ました。

そして、 この回答はこちら にもいくつかの参考になりました。おそらくデスクトップとデバイスの両方で同等に機能する何か。

4
Devraj Gadhavi

私にとってこれ：

height: 100%; 
overflow: hidden; 
width: 100%; 
position: fixed;

十分ではなかった、私はiOSのSafariで作業しませんでした。私も追加する必要がありました：

top: 0;
left: 0;
right: 0;
bottom: 0;

うまく機能させるため。今はうまく動作します:)

3
Loosie94

Safariブラウザーで動作します。

html,
body {
  overflow: hidden;
  position: fixed
}
3
Sridhar

クラスの要素に表示したくないコンテンツをラップして、iPhoneやその他のハンドヘルドデバイス専用のスタイルシートでそのクラスをdisplay:noneに設定してみませんか？

<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">
<!--<![endif]-->
1
S16
html {
  position:relative;
  top:0px;
  left:0px;
  overflow:auto;
  height:auto
}

これをデフォルトとしてcssに追加します

.class-on-html{
  position:fixed;
  top:0px;
  left:0px;
  overflow:hidden;
  height:100%;
}

ページを切り取るためのこのクラスのtoggleClass

このクラスをオフにすると、最初の行はスクロールバーを呼び出します

1
Longwinter

<body>と<div class="wrapper">を使用しました

ポップアップが開くとき...

<body>は高さが100％になり、overflow：hiddenになります

<div class="wrapper">はposition：relative; overflow：hidden; height：100％;を取得します

JS/jQueryを使用してページの実際のスクロール位置を取得し、値を本文のデータ属性として保存します

次に、スクロール位置までスクロールします。wrapper DIV内（ウィンドウではありません）

ここに私の解決策があります：

JS/jQuery：

// when popup opens

$('body').attr( 'data-pos', $(window).scrollTop()); // get actual scrollpos
$('body').addClass('locked'); // add class to body
$('.wrapper').scrollTop( $('body').attr( 'data-pos' ) ); // let wrapper scroll to scrollpos

// when popup close

$("body").removeClass('locked');
$( window ).scrollTop( $('body').attr( 'data-pos' ));

CSS：

body.locked {position:relative;overflow:hidden;height:100%;}
body.locked .wrapper {position:relative;overflow:hidden;height:100%;}

デスクトップとモバイル（iOS）の両方でうまく機能します。

ヒントと改善は大歓迎です:)

乾杯！

1
Tobias Gerlach

はい。これは、divのクリアを処理するためにoverflow：hiddenを使用する場合に、現在レイアウトを壊しているsafariの新しい更新に関連しています。

0
Lee McAlilly

私がやったことは次のとおりです。体のy位置を確認してから、体を固定し、上部をその位置のマイナスに調整します。逆に、本文を静的にし、以前に記録した値にスクロールを設定します。

var body_x_position = 0;

function disable_bk_scrl(){

    var elb = document.querySelector('body');

    body_x_position = elb.scrollTop;
    // get scroll position in px

    var body_x_position_m = body_x_position*(-1);
    console.log(body_x_position);

    document.body.style.position = "fixed";

    $('body').css({ top: body_x_position_m });

}

function enable_bk_scrl(){  

    document.body.style.position = "static";

    document.body.scrollTo(0, body_x_position);

    console.log(body_x_position);
}
0
Arie S.

適用されますが、DOM内の特定の要素にのみ適用されます。たとえば、テーブル、td、またはその他の要素では機能しませんが、<DIV>タグでは機能します。
例えば：

<body>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

IOS 4.3でのみテストされています。

ちょっとした編集：overflow：scrollを使用すると、2本の指でスクロールできるようになります。

0
adam

本体の高さを300ピクセル未満に変更するだけです（ランドスペースのモバイルビューポートの高さは約300ピクセルから500ピクセルです）

JS

$( '.offcanvas-toggle' ).on( 'click', function() {
    $( 'body' ).toggleClass( 'offcanvas-expanded' );
});

CSS

.offcanvas-expended { /* this is class added to body on click */
    height: 200px;
}
.offcanvas {
    height: 100%;
}
0
kristian lepi