Question

我在项目中使用materializecss，我遇到了以下问题：

在带有垂直滚动条的长页面上，通过打开模式删除滚动条，它会使内容向右跳一点。通常这不是什么大问题，但我也使用砌体网格并删除滚动条会导致有趣和不需要的动画（在窗口调整大小时重新初始化砌体）。

经过一些研究和游戏后，我确实在模态打开时保持禁用（空）滚动条的效果非常好：

我将所有内容包装在.wrapper类中，以将其与模态和工具提示（它们是主体的直接后代）分开。然后我通过js将.modal-open类添加到html标记并应用以下css：

.modal-open {
  body {
    overflow-y: scroll !important;
  }
  .wrapper {
    position: fixed;
  }
}

此外，我将.wrapper的顶部设置为负值，等于当前滚动位置。与position: fixed;一起，它确保背景内容保持在当前滚动位置：

(function( $ ) {
    var oldOpen = $.fn.openModal;
    $.fn.extend({
        openModal: function(options) {
            var scroll = $(window).scrollTop();
            $(this).data('scroll-position', scroll);
            $('.wrapper').css('top',0 - scroll);
            $('html').addClass('modal-open');
            oldOpen.call(this, options);
        }
    });
    var oldClose = $.fn.closeModal;
    $.fn.extend({
        closeModal: function(options) {
            $('.wrapper').css('top','initial');
            $('html').removeClass('modal-open');
            oldClose.call(this, options);
            $('body').scrollTop($(this).data('scroll-position'));
        }
    });
}(jQuery));

然而，还有一个问题 - 在我的jsfiddle中，如果你向下滚动一点，将鼠标悬停在一个按钮上以打开工具提示并单击按钮，你会看到工具提示向下跳，我相信相同数量的像素是您当前的滚动位置。以某种方式防止这种情况会很棒。

如果我在打开模态后保持禁用垂直滚动条可见跳过工具提示 - Materialisecss

0 个答案: