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

Question

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

Answer 1

您可以通过在一个 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"});
});