html - 使用固定定位是防止元素在视口上触发滚动条的唯一方法吗？

Question

解释：

我有一个内容 div 会改变高度的页面。当 div 很小时，我想要一个漂亮的渐变渐变到背景颜色。随着 div 的高度增加，它应该将渐变进一步向下推，直到它离开页面。

示例页面

这个例子可以正常工作，但是我想知道我是否可以在不使用 position:fixed 的梯度 div 的情况下做到这一点。我不想使用固定定位的原因是因为当你上下滚动页面时，上面的例子在 iPad 上看起来很奇怪。除了渐变，一切都在移动，所以它使页面看起来很破碎。

有什么方法可以在不使用固定定位的情况下构建我的示例？

谢谢！

Answer 1

overflow只需调整元素的高度和和的变化body（#content示例）：

<div id="content">
    Content here. Use slider to adjust height.<br />
    <div id="slider"></div>
    This div <strong>should</strong> trigger a scrollbar on the window.
</div>
<div id="gradient">Gradient fade to body background. This div <strong>should not</strong> trigger a scrollbar on the window.</div>

html, body {
    height:100%;
}
body {
    padding: 0;
    margin: 0;
    background-color: Green;
    overflow:hidden;
}
div {
    color: #fff;
    text-align: center;
    font-size: 16pt;
}
#slider {
    width: 300px;
    margin: 0 auto;
}
#content {
    line-height: 100px;
    background-color: Red;
    overflow:auto;
    max-height:100%;
}
#gradient {
    height: 200px;
    line-height: 200px;
    background: Orange;
    width: 100%;
}

Answer 2

使用 jQuery 是一种选择吗？如果是这样，这可能是一种解决方案：

每当检测到滚动条时，检查它是由于渐变引起的还是由于内容部分引起的。如果是因为内容保持滚动条，如果不是，隐藏它。

// check to see if there is s scrollbar
if ($("body").height() > $(window).height()) {
    // ok there is a scrollbar, now lets see why there is a scrollbar:
    if ($("#content").height() > $(window).height()){
        // this is legit, do nothing
    }else{
       // the scroll bar is there because of the gradient, hide scroll bar
       $("body").css('overflow','hidden')
    }
})