如何防止正文滚动条和移动

如何防止正文滚动条和移动

本文介绍了加载 twitter bootstrap 模式对话框时,如何防止正文滚动条和移动?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

当我打开 twitter bootstrap 模式对话框时,背景会导致滚动条并移动内容.

When I open the twitter bootstrap modal dialog, the backdrop causes a scrollbar and shift the content.

为了避免滚动条,我使用了这个 css:

To avoid the scrollbar I use this css:

.modal {
    overflow: hidden;
}

但我无法避免这种转变.

But I can not avoid the shift.

问候,马可

我使用的是 Bootstrap 版本 3

I am using Bootstrap Version 3

推荐答案

Marko,

我刚刚遇到了同样的问题.当模态首次显示时,Bootstrap 3.0.0 似乎向 modal-open 添加了一个类.此类将 margin-right: 15px 添加到正文以说明滚动条,它位于较长的页面上.这很好,除了当滚动条不在主体上时较短的页面.在没有滚动条的情况下,margin-right 会导致主体在模态打开时向左移动.

I just had the same problem. It appears that Bootstrap 3.0.0 adds a class to <body>, modal-open, when the modal first shows. This class adds margin-right: 15px to the body to account for a scrollbar, which is there on longer pages. This is great, except for shorter pages when a scrollbar isn't on the body. In the no scrollbar case, the margin-right causes the body to shift left on modal open.

我能够通过添加一些简短的 Javascript 和一些 CSS 来解决这个问题:

I was able to solve this by adding some short Javascript and a little CSS:

CSS:

/* override bootstrap 3 class to remove scrollbar from modal backdrop
   when not necessary */
.modal {
  overflow-y: auto;
}
/* custom class to override .modal-open */
.modal-noscrollbar {
    margin-right: 0 !important;
}

JS:

(function($) {

$(document)
    .on( 'hidden.bs.modal', '.modal', function() {
        $(document.body).removeClass( 'modal-noscrollbar' );
    })
    .on( 'show.bs.modal', '.modal', function() {
        // Bootstrap adds margin-right: 15px to the body to account for a
        // scrollbar, but this causes a "shift" when the document isn't tall
        // enough to need a scrollbar; therefore, we disable the margin-right
        // when it isn't needed.
        if ( $(window).height() >= $(document).height() ) {
            $(document.body).addClass( 'modal-noscrollbar' );
        }
    });

})(window.jQuery);

这些组合允许边距右滚动条修复适用于长页面,但对较短页面禁用(当文档高度

These combined permit the margin-right scrollbar fix to work for long pages, yet is disabled for shorter pages (when document height <= window height). I hope this helps!

Bootstrap 3.0.1+(测试到 3.1.1)是另一回事.请尝试以下操作:

Bootstrap 3.0.1+ (tested up to 3.1.1) is a different story. Try the following:

CSS:

/* override bootstrap 3 class to remove scrollbar from modal backdrop
   when not necessary */
.modal {
  overflow-y: auto;
}
/* custom class to add space for scrollbar */
.modal-scrollbar {
    margin-right: 15px;
}

JS:

(function($) {

$(document)
    .on( 'hidden.bs.modal', '.modal', function() {
        $(document.body).removeClass( 'modal-scrollbar' );
    })
    .on( 'show.bs.modal', '.modal', function() {
        // Bootstrap's .modal-open class hides any scrollbar on the body,
        // so if there IS a scrollbar on the body at modal open time, then
        // add a right margin to take its place.
        if ( $(window).height() < $(document).height() ) {
            $(document.body).addClass( 'modal-scrollbar' );
        }
    });

})(window.jQuery);

编辑:

鉴于 Mac 消除了占用窗口渲染宽度的滚动条,如果您不介意某些功能检测,这里有一个更便携的解决方案 (3.0.1+).参考:http://davidwalsh.name/detect-scrollbar-width

In light of Mac eliminating scrollbars from inhabiting window render width, here's a more portable solution (3.0.1+) if you don't mind some feature detection. Reference: http://davidwalsh.name/detect-scrollbar-width

CSS:

.scrollbar-measure {
    height: 100px;
    overflow: scroll;
    position: absolute;
    top: -9999px;
}

JS:

window.jQuery(function() {
  // detect browser scroll bar width
  var scrollDiv = $('<div class="scrollbar-measure"></div>')
        .appendTo(document.body)[0],
      scrollBarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;

  $(document)
    .on('hidden.bs.modal', '.modal', function(evt) {
      // use margin-right 0 for IE8
      $(document.body).css('margin-right', '');
    })
    .on('show.bs.modal', '.modal', function() {
      // When modal is shown, scrollbar on body disappears.  In order not
      // to experience a "shifting" effect, replace the scrollbar width
      // with a right-margin on the body.
      if ($(window).height() < $(document).height()) {
        $(document.body).css('margin-right', scrollBarWidth + 'px');
      }
    });
});

这篇关于加载 twitter bootstrap 模式对话框时,如何防止正文滚动条和移动?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-31 04:17