gpt4 book ai didi

html - css 将元素定位在屏幕外但滚动条仍然存在

转载 作者:太空宇宙 更新时间:2023-11-04 16:18:17 24 4
gpt4 key购买 nike

我正在尝试将一个 DIV 放置在屏幕之外,以便我可以使用 JQuery Animations 将多个 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

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

奖励 如果有人对实现此目标的另一种方法提出建议(DIV 滑出屏幕并由另一个取代它),那也行得通!

最佳答案

很简单就是加

body {
overflow-x: hidden;
}

或者

添加父级别的 div 并向该 div 写入 overflow-x:hidden

关于html - css 将元素定位在屏幕外但滚动条仍然存在,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30859022/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com