javascript - 奇怪的HTML/JS/CSS滚动条功能难题

因此，我有一个特别独特的目标，希望通过CSS，HTML和jQuery实现。基本上，我有一个页面元素，当我将鼠标悬停在它上面时，我想禁用滚动。我目前正在通过将主体的溢出属性设置为“隐藏”来实现此目的。但是，消失的滚动条意味着内容向右移动，以填补消失的垂直滚动条所产生的空白。是否有办法使页面表现为overflow：hidden，但仍显示滚动条占位符？

最佳答案

您可以通过在div中包含一个div来做到这一点，以使外部div可滚动（自动），然后在鼠标悬停时将内部div的大小调整为恰好合适的大小。

举例来说...

HTML：

<div id="outerTest" >
    <div id="innerTest" >
        ...content goes here...
    </div>
</div>

CSS：

#outerTest {
    width: 100px;
    height: 100px;
    overflow: scroll;
}
#innerTest {
    overflow: hidden;
}

jQuery的：

$("#outerTest").hover(function() {
    $("#innerTest").css({width: "100%", height: "100%"});
}, function() {
    $("#innerTest").css({width: "auto", height: "auto"});
});