gpt4 book ai didi

javascript - 滚动条显示时如何设置 "fix"容器元素高度?

转载 作者:可可西里 更新时间:2023-11-01 13:34:35 24 4
gpt4 key购买 nike

我有一个水平滚动条,它只会在悬停时显示。但问题是当它显示时,它会增加容器的高度并将以下元素向下推。 the demo examle .你可以看到当滚动条显示

两个 div会被下推
<div class="wrapper">
<div class="one">
<div class="oneChild">the height is unknown,the height is unknown,the height is unknown,the height is unknown</div>
</div>
<div class="two">I'm two</div>

有一些规则:

  1. wrapper 和 one height 无法固定,因为 *oneChild * content height 是未知的。两者的高度都由他们的 child 决定。
  2. 滚动球只在悬停时显示,可以使用js或css控制滚动球是否可见。

  3. 欢迎任何 js/css 解决方案。

最佳答案

如果 jquery 是一个选项:

$(document).ready(function() {
height = $('.one').height();
$('.two').css('marginTop', height + 'px');
});

CSS:

.one {
width: 100px;
border: 1px seagreen solid;
position:relative;
}
.one:hover {
overflow: scroll;
}
.two {
position: absolute;
top:30px;
}

关于javascript - 滚动条显示时如何设置 "fix"容器元素高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20390243/

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