2

ここに画像の説明を入力

ページ全体にいくつかのdivがposition:fixedあります。その div の 1 つには、もう少し長いコンテンツがあります。

私の目的は、メインのブラウザー/ページのスクロールバーを使用して、そのボックス内のコンテンツをスクロールすることです。（このような通常ではありません）overflow:auto これは正確な状況です http://s7.postimage.org/d6xl1u9mz/sample.jpg

利用可能なプラグインはありますか？

4

3 に答える 3

2

HTML の知識がなくても: 

<body>
    <section id="bodyContent"></section>
    <header></header>
    <section id="lSide"></section>
    <section id="rSide"></section>
</body>

#bodyContent {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    min-height: 100%;
    width: 100%;
    padding: 90px 45px 0px 105px;
    background-clip: content-box;
    background-color: #FFFFFF;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-image: url(page_background.jpg);
    background-attachment: fixed;
}
header, #lSide, #rSide {
    position: fixed;
}
header {
    top: 0;
    width: 100%;
    height: 90px;
    background-image: url(page_background.jpg);
    background-attachment: fixed;
}
#lSide {
    left: 0;
    top: 0;
    height: 100%;
    width: 105px;
    padding: 90px 0 0 0;
}
#rSide {
    right: 0;
    top: 0;
    height: 100%;
    width: 45px;
    padding: 90px 0 0 0;
}

これにより、コンテンツが#bodyContentさまざまな境界要素の間の開口部内に収まるようになり、必要に応じてオーバーフローがbody要素のスクロールバーをトリガーします。JSFiddle

于 2013-01-21T18:47:58.897 に答える
1

多分それは可能です。トリックを行うjsFiddleを作成しました。完璧ではありませんが、さらに開発することはできます... また、このスニペットは最新のブラウザーでのみ機能しますが、古い IE でも簡単に修正できます。以下のコアコード。

JavaScript:

window.onload = function () {
    var content = document.getElementById('contentwrapper'),
        dimdiv = document.getElementById('scrollingheight'),
        wrapHeight = document.getElementById('fixed').offsetHeight,
        scroller = function () {
            content.style.top = -(document.documentElement.scrollTop || document.body.scrollTop) + 5 + 'px';
            return;
        };
    dimdiv.style.minHeight = (content.scrollHeight - wrapHeight + 2 * 5) + 'px';
    window.addEventListener('scroll', scroller, false);
    return; 
}

CSS:

#fixed {
    position: fixed;
    min-width: 300px;
    min-height: 200px;
    max-height: 200px;
    background: #fff;
    left: 150px;
    top: 200px;
    overflow-y: hidden;
    border: 1px solid #000;
}
#contentwrapper {
    max-width: 290px;
    position: absolute;
    top: 5px;
    left: 5px;
}
#scrollingheight {
    position: absolute;
    top: 100%;
    visibility: hidden;
    min-width: 1px;
}

HTML:

<div id="scrollingheight"></div>
<div id="fixed">
    <div id="contentwrapper">
        content
    </div>
</div>

, butのすべてのコンテンツを修正する必要があることに注意してください。定数はの値に関連しています。body#scrollingheight5#contentwrappertop

于 2013-01-21T17:09:07.627 に答える
0

私の知る限り、それはできません。
少なくとも、いくつかの邪悪な JS トリックがないわけではありません。ブラウザのデフォルトのスクロールバーの高さを強制的に（小さくして）、 （ドキュメント）
Why?とはまったく異なる領域内にあるコンテンツを受け入れることができないためです。私の提案は、カスタム スクロールバーを作成し、素敵な領域の高さを計算し、それをスクロール可能な比率の計算に追加することです。html, body
overflow hidden

于 2013-01-21T15:27:45.097 に答える