1

私は Stackoverflow で多くのことを検索しましたが、人々は私のようではなく、スクロール バーを取り除きたいと思っているようです。

例: http://jsfiddle.net/U4kX5/2/ウィンドウの端が赤いボックスに達したときにブラウザーの スクロール バーを表示したいが、下の青い部分は非表示のままにしておく (そのため、ボディに overflow:hidden を指定した)

<div class="wrapper"> 
    <div class="inner"> </div>
    <div class="partially-hidden"> </div>
</div>

そしてCSS

body {
  overflow:hidden;
}
.wrapper {
   position: absolute;
   bottom:0px;
   left:50%;
}
.inner {
    position:relative;
    left:-50%;
    background: red;
    width:300px;
    height:300px;
}
.partially-hidden {
    width:100px;
    height:600px;
    background: blue;
    position: absolute;
    bottom: -400px;
}
4

1 に答える 1

0

CSSメディアクエリを使用してそれを理解しました:)

赤いボックスと同じ最大高さでメディア スクリーンを設定し、その位置を :relative with margin:0 auto; に変更するだけです。

例: http://jsfiddle.net/U4kX5/5/

@media screen and (max-height:300px) { 
    .wrapper {
        position:relative;
        right:0;
        left:0;
        overflow-y:hidden;
    }

    .inner
    {
        position:relative;
        margin: 0 auto;
        right:0;
        left:0;
    }

    .partially-hidden {
        left: 50%;
    }


    body {
        overflow:visible;
    }
}

結果は約98%満足です

それが他の人に役立つことを願っています。

ありがとう。

于 2013-06-17T21:22:45.107 に答える