6

オーバーレイが横からスライドするレスポンシブ サイトを構築しています。問題はモバイル上にあり、これらのオーバーレイはスクロールできる必要がありますが、後ろのページをスクロールしたくありません。デスクトップ設定では、overflow:hidden はページのスクロールを停止するように機能しますが、スライド アウト div のスクロールは許可します。ただし、IOS では、このプロパティは機能しません。基本ページは引き続きスクロール可能です。以下のjsbinを作成しました。IOS で黒い div をスクロールする方法を誰かに教えてもらえますか? デスクトップでは問題なく動作しますが、モバイルでは動作しません。

http://jsbin.com/isayuy/4/

ありがとう

4

4 に答える 4

2

@Tim Wassonの解決策は私にとってはうまくいきます。

別のオプションとして、スライドアウトが表示されているときに body タグに position:fixed を適用しない理由があるかどうか疑問に思っていますか?

http://jsbin.com/isayuy/6

明らかな何かが欠けている場合はお詫び申し上げます。

幸運を！

于 2013-06-28T20:54:30.790 に答える
1

Here's what I'm doing - this solution prevents the background from scrolling, while retaining the initial position (i.e. it doesn't jump to the top).

    preventScroll : function(prevent) {
        var body = $('body'), html = $('html'), scroll;
        if (prevent) {
            var width = body.css('width');
            scroll = window.pageYOffset;
            // This is all you need to do to prevent scroll on everything except iOS.
            html.css({ 'overflow': 'hidden'});
            // For iOS, change it to fixed positioning and make it in the same place as
            // it was scrolled.
            // For all systems, change max-width to width; this prevents the page getting
            // wider when the scrollbar disappears.
            body.css({ 'position': 'fixed', 'top': -scroll, 'max-width' : width});
        } else {
            scroll = -parseInt(body.css('top'));
            html.css({ 'overflow': '' });
            body.css({ 'position': '', 'top': '', 'max-width': '' });
            window.scrollTo(0, scroll);
        }
    },

This will cause problems if you resize (rotate phone) while scroll is prevented; I also have a resize event which calls preventScroll(false) and then preventScroll(true) to update the position in that case.

于 2016-07-01T13:30:04.303 に答える