2

説明：

高さを変更するコンテンツdivのあるページがあります。divが小さい場合は、背景色にグラデーションをフェードさせたいです。divの高さが大きくなると、ページから外れるまでグラデーションをさらに押し下げる必要があります。

サンプルページ

この例は正しく機能しますが、gradient divでposition：fixedを使用せずにこれを実行できるかどうかを知りたいです。固定位置を使用したくない理由は、ページを上下にスクロールすると、上記の例がiPadで奇妙に見えるためです。グラデーション以外はすべて移動するため、ページが壊れているように見えます。

固定ポジショニングを使用せずに例を構成する方法はありますか？

ありがとう！

4

2 に答える 2

1

要素の高さを調整し、and（例）を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%;
}
于 2012-07-18T01:33:30.340 に答える
0

jQueryの使用はオプションですか？もしそうなら、これは1つの解決策かもしれません：

スクロールバーが検出されたら、それがグラデーションによるものなのか、コンテンツセクションによるものなのかを確認してください。コンテンツが原因である場合はスクロールバーを保持し、そうでない場合は非表示にします。

// 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')
    }
})
于 2012-07-18T01:46:29.397 に答える