如果存在滚动条，则打开AngularJS模态会导致页面移动 [英] Opening AngularJS modal causes page to shift if scrollbar exists

问题描述

我正在创建一个AngularJS模态，当我将鼠标悬停在菜单元素上时会弹出该模态. 我的问题是，当当前页面具有滚动条时，模态会导致主页的滚动条消失，然后导致模态后面的背景向右移动，而当模态关闭时主体会向左移动.

I am creating an AngularJS modal that pops up when I hover over a menu element. The problem I have is when the current page has a scrollbar the modal causes the scrollbar for the main page to disappear, which then causes the background behind the modal to shift to the right, and when the modal closes the body shifts to the left.

模态打开时，它将"modal-open"类添加到主体.我可以将"modal-body"添加到页面的css文件中，并将其定义为:

When the modal opens it adds the class "modal-open" to the body. I can add the "modal-body" to my css file for the page, and define it as such:

    .modal-open{
    margin-right:15px;
}

可以解决此问题，但仅适用于带有滚动条的页面.如果页面没有滚动条，而我使用此自定义的模态打开" css定义解决方案，则正文将再次移动.

Which fixes the problem, but only for pages with a scrollbar. If the page does not have a scrollbar and I use this custom "modal-open" css definition solution then the body shifts again.

我的大多数页面都有滚动条，因此自定义的模态打开" css定义可以修复大多数页面，但是我认为这是一个小错误.

Most of my pages have a scrollbar, so the custom "modal-open" css definition fixes most of my pages, but I would consider this a small bug.

有人遇到过此错误吗?如果是，您如何解决呢?

Has anyone come across this error and if so how did you fix it?

谢谢

大卫

推荐答案

作为该bug的补丁，我只是将一个垂直滚动条放在主体上.即使页面不需要滚动，这也会强制显示一个.不过，我希望有更好的解决方案.

As a patch over the bug, I simply put in a vertical scrollbar on the body. This forces one to appear, even if the page requires no scrolling. I would love a better solution though.

body{
overflow-y: scroll !important;

}

这篇关于如果存在滚动条，则打开AngularJS模态会导致页面移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！