如何“;“修复”;显示滚动条时的容器元素高度

how to "fix" container element height when scrollbar shows?

本文关键字：高度 元素 滚动条 修复 显示 如何      更新时间：2024-03-09

我有一个水平滚动条，只有在悬停时才会显示。但问题是，当它显示时，它会增加容器的高度，并向下推动以下元素。演示示例。当滚动条显示
时，两个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. 包装器和一个高度无法固定，因为*oneChild*内容高度未知。两个人的身高都是由他们的孩子决定的

  2. scroball仅在悬停时显示。您可以使用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;
 }

如果一个元素的子元素永远不会改变，那么您可以在设置高度后获得元素的高度，然后将其固定在该高度。

var $one = $('.one');
var height = $one.height();
$one.css('height', height);

如果一个元素的子元素的高度可能发生变化，则可以在悬停在该元素上时固定高度，并在停止悬停时将其设置为自动。

var $one = $('.one');
var height = $one.height();
$one.on('mouseenter', function() {
    $one.css('height', height);
});
$one.on('mouseleave', function() {
    $one.css('height', 'auto');
});

您可以将悬停时div的高度设置为滚动条不在时的高度。假设jQuery正常：

$(document).ready(function() {
    var oneHeight = $('.one').height();
    $('.one').hover(
         function(){ $(this).height(oneHeight); },
         function(){ $(this).height(oneHeight); }
    );
});

这确实增加了一个不幸的垂直滚动条，但如果你想让垂直位置保持不变，你需要有垂直条来查看水平滚动条的内容。

我的解决方案是：首先添加填充底部，它与水平scroball一样高，然后当鼠标悬停事件发生时，填充底部设置为零。

相关文章：