logo标签列表

CSS定位元素离屏但滚动条仍可见

htmlcss
3
我试图将一个DIV定位到屏幕外，以便使用JQuery动画在屏幕上/下（水平方向）“滑动”多个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，其中包含我正在处理的简化版本。示例JS Fiddle 这似乎应该非常简单，但也许是因为我今天已经工作太久了，在搜索时忽略了一些东西。 奖励 如果有人对另一种使这种情况发生的方法（DIV滑出屏幕，另一个取代它）有建议，那也可以！
相对定位仍然保留了元素占用的空间，就像它没有被定位一样。因此，应该使用绝对定位。 - Hashem Qolami
但是我不会失去自动居中DIV的能力吗？还是说我应该在它离屏时将“离屏”div定位为绝对位置...当我将其移动到屏幕上时同时更改位置类型？ - dangel
4个回答
4
很简单，只需添加 <\p>。
body {
    overflow-x: hidden;
}

或者

添加一个父级div，并在该div中写入overflow-x:hidden

从OP：（我不想完全禁用滚动条，以防动态内容增长）。 - dangel
父元素放到屏幕外或屏幕内的div中？ - dangel
你可以使用绝对或相对定位，但屏幕外的内容应该出现滚动条，因此必须使用overflow属性。除了body之外，你还可以使用任何父级DIV（适用于两者）。 - Karthi Keyan
0

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

示例：https://jsfiddle.net/dkLqv29p/2/

编辑#maincontent2的top属性，将其拉回到屏幕内。

left: calc(50% - 50px); 能够跨浏览器兼容吗？ - dangel
通常情况下是安全的，除非你的目标浏览器比较古老。请参考：http://caniuse.com/#feat=calc - light
0
尝试像这样做：http://codepen.io/nathanbirrell/pen/xGLXgB 这个例子已经设置好了包含垂直动画的菜单和所有内容。
JS 包括:
$("span").click(function() {
  $("nav").toggleClass("active");
  $("li").toggleClass("active");
  if($(this).text() == "☰") {
    $(this).text("×");
  }
  else {
    $(this).text("☰");
  }
})
1
该解决方案使用 position: fixed 而不是 relative 或 absolute 来避免滚动条。 - Peter
-1

这是你想要的吗？查看更新后的 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;
}
我需要在页面水平居中。div的大小将是动态的。 - dangel
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接