Question

我试图将DIV放在屏幕上，以便我可以使用JQuery Animations来滑动＆＃34;屏幕上的多个DIV（水平方向）...但是我在定位第二个DIV时遇到了问题，因为它创建了滚动条，即使它有一个负的上边距。

所有元素都相对定位（也许这就是我的问题？）。正在滑动的第一个主要DIV位于中心margin:auto，并且有一个顶部偏移，以帮助它垂直居中。

第二个DIV有right:5000将其移出屏幕。但由于它处于正常流量状态，它仍然会导致垂直滚动条，即使top:-10000我已经尝试overflow:hidden没有运气，也不确定还有什么可做的。（我不想在动态内容增长的情况下完全禁用滚动条。）

示例CSS

#maincontent {
    position: relative;
    width: 100px;
    height: 250px;
    margin: auto;
    top: 100px;
    background-color:black;
}

#maincontent2 {
    position: relative;
    width: 100px;
    height: 250px;
    margin: auto;
    background-color:blue;
    top: -1000px
}

body{
    position:relative;
}

示例HTML

<body>
   <div id="maincontent"></div>
   <div id="maincontent2"></div>
</body>

这是一个JSFiddle，其中包含了我正在使用的一个愚蠢的版本。 Sample JS Fiddle

这看起来应该非常简单，但也许我今天在这方面工作太久并且在搜索时忽略了一些东西。

BONUS 如果有人建议采用另一种方法来实现这一目标（DIV在屏幕上滑动，另一种方式也可以使用它），这也是有效的！

Answer 1

这很简单只需添加

body {
    overflow-x: hidden;
}

或

添加父级div并将overflow-x:hidden写入该div

Answer 2

尝试这样的事情：http://codepen.io/nathanbirrell/pen/xGLXgB

这有一个菜单，所有设置都是垂直动画。

JS包括：

$("span").click(function() {
  $("nav").toggleClass("active");
  $("li").toggleClass("active");
  if($(this).text() == "☰") {
    $(this).text("×");
  }
  else {
    $(this).text("☰");
  }
})

Answer 3

这是您想要的，请查看更新后的JS Fiddle

<body>
<div id="maincontent"></div>
<div id="maincontent2"></div>
</body>

CSS：

#maincontent {


    position:absolute;
    width: 100px;
    height: 250px;
    top: 100px;
    background-color:black;
  }
#maincontent2 {
   position:absolute;
    width: 100px;
    height: 250px;
    background-color:blue;
    top: -100px
}
body{
    position:relative;
}

Answer 4

相对定位按照正常文档流程占用空间。要从文档流中取出元素，请使用绝对定位。

小提琴：https://jsfiddle.net/dkLqv29p/2/

修改top的{{1}}属性，将其“向下”移回屏幕。

css将元素置于屏幕外但滚动条仍然存在

4 个答案: