設定overflow-y：hidden;

Question

私は自分のウェブサイトでモーダルポップアップを開くjavascriptをいくつか持っていて、要素のoverflow-yプロパティもhiddenに設定しています。 ChromeとIEでは、これは期待通りに機能します - スクロールバーは非表示になり、モーダルポップアップの背後にあるページは同じスクロール位置にとどまります。ポップアップが閉じられると、overflow-yはに設定され、ページは以前と同じ状態および位置にあります。

overflow-yがhiddenに変更されるとすぐに、ページのスクロール位置が一番上にジャンプするため、ポップアップが閉じたときに、ユーザーにとってビューが変更された - 理想的ではありません。

問題がon this jsfiddle

を見ることができ、この動作のための任意の解決策はありますか？

Answer 1

htmlの代わりにbodyタグを使用します。

JSフィドル： - http://jsfiddle.net/SBLgJ/6/

JSの変更： -

$(document).ready(function() { 
    $('#middle a').on('click', function(e) { 
     e.preventDefault(); 
     $('body').css('overflow-y', 'hidden'); 
    }); 
}); 

CSSの変更： -

body { 
    overflow-y:scroll; 
} 

そのような行動のために報告された問題があります。 （https://github.com/necolas/normalize.css/issues/71）

Answer 2

さまざまなブラウザに多数のバグがあり、機能がすべてあふれていますので、bodyタグとhtmlタグのスタイルを変更するように注意してください。

var $content = $('<div/>').append($body.contents()).appendTo($body); 
$content.css('overflow-y', 'hidden'); 

これは私がこれを一貫全体で取り組んで取得することができました唯一の方法である：私は、独自の要素の中に体の内容をラップし、その上にスクロール制限を適用する必要がありました。この問題を解決するために

さまざまなブラウザとデバイス。

Answer 3

この問題が発生しました。私の修正は

/** 
* Store the scroll top position as applying overflow:hidden to the body makes it jump to 0 
* @type int 
*/ 
var scrollTop; 

$(selecor).unbind('click.openmenu').on('click.openmenu', function (e) { 
    // Stuff... 
    scrollTop = $('body').scrollTop() || $('html').scrollTop(); 
    $('body,html').css({overflow: 'hidden'}); 
}); 

$(selector).unbind('click.closemenu').on('click.closemenu', function (e) { 
    // Stuff 
    $('body,html').css({overflow: 'initial'}).scrollTop(scrollTop); 
}); 

でした。しかし、ユーザーがビューポートのサイズを変更した場合の問題は解決しません。

Answer 4

htmlでoverflow: hiddenを使用しないでください。bodyでのみ使用してください。 同じ問題が発生しましたが、htmlを削除して修正しました。代わりに

：

$('body, html').css('overflow', 'hidden');

実行します。私のために問題を解決し、最初から100％身長を維持

$('body').css('overflow', 'hidden');

Answer 5

。

body{ 
    height:100vh; 
    overflow:auto; 
} 
body.with-modal{ 
    overflow:hidden; 
}