1

ボタンをクリックするとHTMLページがあり、divと同じページに作成されたポップアップを表示しています。そのポップアップを表示するには、親ページのスクロールバーを無効にする必要があります。現在、私はこれをやっています：

/* Function to disable parent page scrollbar */
function DisableParentPageScroll(){
    $('body,html').css('overflow-y','hidden');
}

/* Function to enable parent page scrollbar */
function EnableParentPageScroll(){
    $('body,html').removeAttr("style");
}

しかし、ページを無効にすると、ページ シフトが観察されます。どうすればこれを防ぐことができますか?

4

1 に答える 1

2

Page Shiftを使用している用語は、スクロールバーを削除しているため発生し、スクロールバーを削除するとスペースが空になり、デザインドキュメントのスペースが増えてシフトします。これを回避したい場合はPadding or Margin、外部ラッパーまたは<body>.

たとえば、このような

/* Function to disable parent page scrollbar */
function DisableParentPageScroll(){
    $('html').css('overflow', 'hidden'); // Added this for few browsers
    $('body').css({
        'overflow-y':'hidden',
        'padding-right': '20px' // Asuming the scrollbar width as 20px
     });
}

/* Function to enable parent page scrollbar */
function EnableParentPageScroll(){
    $('html').removeAttr('style'); // Added this for few browsers
    $('body').css({
        'overflow-y':'auto',
        'padding-right': '0'
     });
}
于 2012-06-28T10:33:49.860 に答える