4

たとえば、次のdivsような2つがあります。

<body>
    <div id="header">
        MY CONTENTS
    </div>
    <div id="main">
        MY OTHER CONTENTS
    </div>
</body>

1つdivは属性position:fixed;を持ちwidth:100%;、CSSでは、もう1つdivは内部に多くのコンテンツを含む単なるdivです。

さて、いつものように、右側にスクロールバーがあります。ただし、このスクロールバーはすべてに影響しdivsます。スクロールバーが2番目にのみ影響するようにしたいのですdivが、可能ですか？

overflow:auto、overflow:hiddenですべてを試しましたoverflow:scrollが、目標を達成できませんでした...

編集：ここに私のjsfiddle：http: //jsfiddle.net/upcfp/

4

5 に答える 5

0

試す：

#div2 {
  overflow-y: scroll;
}

これにより、必要な場合にのみスクロールバーが配置されます。常に表示するには、を使用しますoverflow-y: scroll;。div一般にIDまたは属性に数字だけを使用するべきではないため、2番目のdivのIDの前に接頭辞を付けました。

は#、ルールが。に続くIDを持つ要素に適用されることを意味します#。すべてに適用したい場合はdiv、代わりにクラスを使用します。

デモ： http： //jsfiddle.net/6EVtN/

それ以上のコードが表示されない場合、問題はブラウザの互換性が原因である可能性があります。上記の例は、MozillaFirefox13.0.1およびIE8でテストされました。

更新されたデモ：http：//jsfiddle.net/j4uAM/

于 2012-07-16T22:06:46.423 に答える
0

あなたはそのようなことをしたいですか？

jsfiddleの例1

私はあなたのjsfiddleを編集し、あなたの質問に不要な部分のいくつかを削除しました：

jsfiddleの編集バージョン

あったようです

</div>

#headerにありませんが、それはあなたが取得したかったものですか？

于 2012-07-16T22:24:56.267 に答える
0

これはあなたが考えていたものですか？

これは簡単な方法です。私は100ピクセルの高さで、絶対に配置された上部にヘッダーを持っています。その下に、100％の高さ、100ピクセルの透明な上部境界線を持つメインコンテンツ領域があります（したがって、コンテンツは絶対位置のヘッダーの下に表示されます）。

CSSのbox-sizingプロパティを使用すると、パディングや境界線を含め、要素全体を指定した幅と高さに合わせることができます。したがって、上部の境界線を含めると、メインコンテンツの高さは100％であり、スクロールバーはメインコンテンツのdivにのみ表示されます。

ちなみに、ここでの秘訣は、との両方の高さhtmlをbody100％に設定することです。そうでなければ、これは機能しません。

CSS：

html,body {
    height:100%;
}
#header {
    position:absolute;
    width: 100%;
    height: 100px;
    background:#c3c3c3;
    z-index:1;
}
#main {
    background: #eee;
    height:100%;
    border-top:100px solid transparent;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    overflow:auto;
}​

これが私の解決策を使ったあなたのフィドルです。

于 2012-07-16T22:32:54.380 に答える
0

わかりました、私は私の問題を解決しました、私はこのコードを使用しました：

body{
overflow: hidden;
}
#main{
overflow: scroll;
}
#maincontent{
height: 1500px;
}

#mainのコンテンツで高さを指定しましたが、皆さんのおかげでうまくいきました！

于 2012-07-17T11:04:43.423 に答える
-1

これは完璧な解決策ですが、コード形式をスタックオーバーフローで維持する方法がわかりません。

<script>
$("#cart").bind("mousewheel", function(e){
var intElemScrollHeight = document.getElementById("cart").scrollHeight;
var intElemClientHeight = document.getElementById("cart").clientHeight;
if( intElemScrollHeight - $("#cart").scrollTop() === intElemClientHeight) {
    $(document).bind("mousewheel", function(event) {
        event.preventDefault();
    });
}
if(e.originalEvent.wheelDelta /120 > 0 ) {
    if($("#cart").scrollTop() != 0) {
        $(document).unbind("mousewheel"); 
    } else {
        event.preventDefault();
    }
}});
$("#cart").on("mouseleave", function(event) {
   $(document).unbind("mousewheel");
});
</script>
于 2015-08-01T01:27:03.460 に答える