css 禁用水平滚动条,因为具有position:absolute的DIV位于页面之外

k5ifujac  于 2022-11-19  发布在  其他
关注(0)|答案(7)|浏览(199)

我有一个绝对定位的元素在页面的“外部”,但我希望浏览器(我使用的是Firefox 3)不显示水平滚动条。-20px”)是可以的,并且不显示滚动条。-20px”)总是显示滚动条。有没有可能隐藏滚动条,但保持标准滚动可能?我的意思是,我只想禁用滚动由于这个绝对定位的元素,但保持滚动由于其他元素(我知道我可以完全禁用滚动条,这不是我想要的)。

<!DOCTYPE html>
<html>
<body>
  <div id="el1" style="position: absolute; top: 0; background-color: yellow; left: -20px;">
    element
  </div>
  <div id="el2" style="position: absolute; top: 0; background-color: yellow; right: -20px;">
    element
  </div>
  <h1>Hello</h1>
  <p>world</p>
</body>
</html>
6jjcrrmo

6jjcrrmo1#

是的,这是可能的,在你的html标签上,输入style="overflow-x: hidden"。这就可以了...

lzfw57am

lzfw57am2#

这实际上可以使用直接的CSS来完成,而不需要对页面宽度等有任何限制。它可以通过以下方式完成:
1.创建一个具有隐藏溢出区的div,它绝对位于页面的左上角。使其宽度和高度为100%
1.创建另一个相同的div,但没有隐藏溢出
1.为div添加一个类,该类将包围所创建的div的内容,使其位置相对,并为它提供您希望主页内容具有的任何宽度
1.在您创建的每个div中添加该类的内容。
第一个div中的内容将与第二个div中的内容保持正确对齐,但其超出窗口边界的任何内容都将被截断。
下面是一个工作示例,它将图像保持在相对于其余内容的固定位置,而不使用任何JavaScript:
第一个

ckocjqey

ckocjqey3#

您需要做的是在div之外添加一个 Package 器。
下面是CSS:我将我的类称为“main_body_container”

.main_body_container {
    min-width: 1005px; /* your desired width */
    max-width: 100%;
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
}

希望对你有帮助:)

更新

为它创建了一个画笔,查看它here

xdnvmnnf

xdnvmnnf4#

不太确定这是否有帮助,但您可以尝试将所提到的div的样式改为:

<div id="el1" style="position:fixed; left:-20px; top:0; background-color:yellow; z-index:-1">element</div>

<div id="el2" style="position:fixed; left:20px; top:0; background-color:yellow; z-index:-1">element</div>

通过将位置设置为固定,它将指定的div“锁定”在适当的位置,而其余的内容仍然是可滚动的。当然,这是假设在该示例中,其余的内容是由z-索引堆叠在定义的div的顶部。
希望这对你有帮助。

cbjzeqam

cbjzeqam5#

我可以通过将元素的position属性更改为fixed来解决这个问题:

position: fixed;

此元素不再引起水平滚动,但其他元素仍引起水平滚动。

f0ofjuux

f0ofjuux6#

将以下内容添加到CSS:

div {
overflow-x:hidden;
overflow-y:hidden;
}

IE无法识别overflow-x和-y样式。所以如果你只关注Firefox 3,这将是正常的。否则,你可以使用一些javascript:

document.documentElement.style.overflow = 'hidden';  // firefox, chrome
document.body.scroll = "no";    // ie only
uqjltbpv

uqjltbpv7#

把下面的样式

html {overflow-x:hidden;}

我在IE 8、FF和Chrome上进行了测试。

相关问题