0

これを見てください：

http://jsfiddle.net/sS7HN/2/

私が達成しようとしているのは、その内側のスクロールバーの代わりに、メインウィンドウのスクロールバーを使用したいということです。Windowsの垂直スクロールバーを使用して内部のコンテンツを移動できるようにしますinnerContentが、同時に外側のdiv（contentおよびmainContent）を修正したいと考えています。

それは可能ですか？

CSS 

#header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 50px;
}

#footer {
    position: fixed;
    left: 0;
    bottom:0;
    width: 100%;
}

#content {
    background-color:#656565;
    width: 300px;
    margin:0 auto;
    padding-top:10px;
    border-radius:5px;
}

#mainContent {
    margin:0px auto;
    background-color:#515151;
    width:250px;
    border-radius:5px;
    padding-top:20px;
}

#contentHolder {
    color:#fff;
    margin:0 auto;
    width:200px;
    height: 400px;
    background-color:#000000;
    border-radius:10px;
    overflow:auto;
}

HTML

<div id="header">cfdvfvdfvfv</div>
<div id="content">
    <div id="mainContent">
        <div id="contentHolder">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum imperdiet lacus in aliquet. Nam leo
            risus, bibendum vel varius non, porta vel orci. Integer scelerisque est eu augue tempus lfvdvdfvuctus.
            Aliquam erat volutpat. Phasellus vulputate dolor ligula.
        </div>
    </div>
</div>
<div id="footer"></div>
4

2 に答える 2

0

@Daedalusは、あなたと同様の質問に対するこの回答で、このためのjQueryをいくつか作成しました。

jQueryコードは以下のとおりです（編集：コードに一致するように変更しました）：

var curScroll = 0;

$(window).bind('mousewheel DOMMouseScroll', function(e){
    var evt = window.event || e;
    var delta = evt.detail? evt.detail*(-120) : evt.wheelDelta;
    if(delta < 0) {
        //scroll down
        curScroll += 10;
    }
    else {
        //scroll up
        curScroll -= 10;
    }
    $('#contentHolder').scrollTop(curScroll);
    return true;
});
于 2013-01-10T02:39:22.603 に答える
0

上記のコメントで述べたように、CSS ベースの例が利用可能です。

また、丸みを帯びた角が必要でした。これを行うには、コンテンツに余分なパディングを少し加えてからfixed、その上下にページの端をいくつか追加します。

角を丸くした修正サンプル

重要なビットは次のとおりです。

#content {
    padding: 120px 150px; /* the 120px is the overlay vert height + 10px + 10px */
}
.page_horiz_strip {
    position:fixed;
    left: 150px;
    right: 150px;
    height: 10px;
    background: white;
}
.top_rounded {
    top: 90px; /* 10px less than the overlay vert height */
    border-radius: 10px 10px 0px 0px;
}
.bottom_rounded {
    bottom: 90px; /* 10px less than the overlay vert height */
    border-radius: 0px 0px 10px 10px;
}

ノート

  • コンテンツの上下に高さ 10px のストリップを追加しています (そしてストリップを丸めています)。
  • オーバーレイの縦の高さは 100px です。
  • したがって、コンテンツのパディングを 100px + 10px + 10px に増やす必要があります。
  • したがって、ストリップはページの端から 100 ピクセルではなく、90 ピクセル離す必要があります。
于 2013-03-05T07:03:58.777 に答える