单击时HTML元素向右移动-css问题答案

【问题标题】：Html element shifts to right when clicked - css issue单击时HTML元素向右移动-css问题
【发布时间】：2013-10-01 11:18:31
【问题描述】：

我正在使用 jquery 弹出窗口向用户显示额外信息。页面中有一个链接，点击它，我会从上方显示弹出窗口。

我正在使用CodePen 的弹出窗口现在的问题是，当我单击该链接时，它会移动到右侧。

当页面内容较多且出现垂直滚动条时，会出现此问题。

当内容适合页面时，不会出现此类问题。

html代码如下。

文件：index.html

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>CodePen - Pen</title>

  <link rel='stylesheet prefetch' href='http://dimsemenov-static.s3.amazonaws.com/dist/magnific-popup.css'>

    <style>
html, body {
  margin: 0;
  padding: 10px;
  -webkit-backface-visibility: hidden;
}

/* text-based popup styling */
.white-popup {
  position: relative;
  background: #FFF;
  padding: 25px;
  width: auto;
  max-width: 400px;
  margin: 0 auto;
}

/* 

====== Move-from-top effect ======

*/
.mfp-move-from-top {
  /* start state */
  /* animate in */
  /* animate out */
}
.mfp-move-from-top .mfp-content {
  vertical-align: top;
}
.mfp-move-from-top .mfp-with-anim {
  opacity: 0;
  transition: all 0.2s;
  transform: translateY(-100px);
}
.mfp-move-from-top.mfp-bg {
  opacity: 0;
  transition: all 0.2s;
}
.mfp-move-from-top.mfp-ready .mfp-with-anim {
  opacity: 1;
  transform: translateY(0);
}
.mfp-move-from-top.mfp-ready.mfp-bg {
  opacity: 0.8;
}
.mfp-move-from-top.mfp-removing .mfp-with-anim {
  transform: translateY(-50px);
  opacity: 0;
}
.mfp-move-from-top.mfp-removing.mfp-bg {
  opacity: 0;
}


/* preview styles */
html {
  font-family: "Calibri", "Trebuchet MS", "Helvetica", sans-serif;
}

h3 {
  margin-top: 0;
  font-size: 24px;
}

a,
a:visited {
  color: #1760BF;
  text-decoration: none;
}

a:hover {
  color: #c00;
}

.links li {
  margin-bottom: 5px;
}

h4 {
  margin: 24px 0 0 0;
}

.bottom-text {
  margin-top: 40px;
  border-top: 2px solid #CCC;
}
.bottom-text a {
  border-bottom: 1px solid #CCC;
}
.bottom-text p {
  max-width: 650px;
}

</style>

  <script src="js/prefixfree.min.js"></script>
</head>

<body>
<center><h1>Web Assistant</h1></center>


            <p>
                Page Content 1
            </p>
            <br>
            <br>

            <p>
                Page Content 2
            </p>
            <br>
            <br>
            <p>
                Page Content 3
            </p>
            <br>
            <br>
            <p>
                Page Content 4
            </p>
            <br>
            <br>

            <p>
                Page Content 5
            </p>
            <br>
            <br><p>
                Page Content 6
            </p>
            <br>
            <br>
            <p>
                Page Content 7
            </p>
            <br>
            <br>
            <p>
                Page Content 8
            </p>
            <br>
            <br>
            <p>
                Page Content 9
            </p>
            <br>
            <br>
            <p>
                Page Content 10
            </p>
            <br>
            <br>
<div   id="inline-popups" class="links" style="position:fixed; top:90%; right:5%;">
    <a href="#test-popup" data-effect="mfp-move-from-top">See Help</a>
</div>


<div id="test-popup" class="white-popup mfp-with-anim mfp-hide">You may put any HTML here. This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.</div>

  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
  <script src='http://dimsemenov-static.s3.amazonaws.com/dist/jquery.magnific-popup.min.js'></script>
  <script src="js/index.js"></script>

</body>

</html>

index.js 文件代码如下。

// Inline popups
$('#inline-popups').magnificPopup({
  delegate: 'a',
  removalDelay: 500, //delay removal by X to allow out-animation
  callbacks: {
    beforeOpen: function() {
       this.st.mainClass = this.st.el.attr('data-effect');
    }
  },
  midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});

【问题讨论】：

在 jsfiddle 上设置一个小提琴。这将使调试更容易

标签： jquery html css magnific-popup

【解决方案1】：

这是 Magnific Popup 正在做的事情。它在html 元素上设置了17px 的margin-right。我不知道为什么，虽然我在 GitHub 上读到它是对某些东西的修复。无论如何，您可以使用以下 CSS 进行修复：

html {
    margin-right: 0 !important;
    overflow: visible !important;
}

【讨论】：

唯一适用于所有浏览器的修复程序，过去几个小时我尝试了很多。非常感谢！
@Andrei 不客气！我也为此苦苦挣扎，所以我想我会分享。

【解决方案2】：

在body 上设置overflow-y: scroll。这样滚动条的空间总是被保留，即使不需要滚动条。

【讨论】：

不，它没有解决，现在我在页面上显示了 2 个滚动条，一个是原来的滚动条，之前显示过，另外一个是在我设置 overflow-y:scroll 时添加的到标签。它没有解决问题..

【解决方案3】：

我最近遇到了完全相同的问题。在hover 上使用margin:5px 修复它。如果您不需要支持 IE8 及以下版本，这是最简单的方法。

【讨论】：