7

が付いている別のdivの内側に、固定された上部の位置に全幅の小さな赤いdivが必要overflow: scrollです。jsFiddleがそれを明確にすることを願っています：http：//jsfiddle.net/mCYLm/2/。

問題は、赤いdivがスクロールバーと重なっていることです。;right: 0の右側を意味すると思います。div.wrapperのスクロールバーは減算されませんdiv.main。に移動するとoverflow: scroll、div.wrapper赤いバナーのサイズが適切になります（フィドル）。ただし、固定位置ではなくなりました（下にスクロールするとバナーが上にスクロールします）。

次の2つのことを一緒に達成するにはどうすればよいですか？

これをGoogleChromeで動作させたいのですが。

HTML：

<div class="wrapper">
    <div class="red-banner"></div>
    <div class="main">
        <div class="item">foo</div>
        <div class="item">foo</div>
        <div class="item">foo</div>
        <div class="item">foo</div>
    </div>
</div>​

CSS：

div.wrapper {
    position: relative;
}

div.main {
    height: 200px;
    overflow-y: scroll;
}

div.item {
    border: 1px solid black;
    margin: 20px;
    padding: 20px;
}

div.red-banner {
    background-color: red;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 20px;
}
4

2 に答える 2

5

これは純粋なCSSでは不可能なようです。そのため、JavaScript（jQuery）ハックを次に示します。

$(function() {
  var $container = $("<div>").css({ height: 1, overflow: "scroll" }).appendTo("body");
  var $child = $("<div>").css({ height: 2 }).appendTo($container);
  window.SCROLLBAR_WIDTH = $container.width() - $child.width();
  $container.remove();
});

それから：

$("div.red-banner").css({
  right: SCROLLBAR_WIDTH
});
于 2012-06-11T17:05:29.180 に答える
1

HTML

<div class="scroller">
    <div class="banner-wrapper">
        <div class="banner"></div>
    </div>
</div>

<div class="main">
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
</div>​

CSS

* { margin: 0; padding: 0 }
body {
    padding-top: 30px;
}

div.main {
    height: 200px;
    width: 100%;
    overflow-y: scroll;
    position: absolute;
    z-index: 50;
    background: -webkit-gradient(linear, center top, center bottom, from(white), to(rgba(255,255,255,0)));
}

div.item {
    border: 1px solid black;
    margin: 20px;
    padding: 20px;
}

div.scroller {
    height: 20px;
    width: 100%;
    position: absolute;
    z-index: 100;
    overflow: hidden;
}

div.banner-wrapper {
    background: transparent;
    position: relative;
    height: 20px;
    overflow-y: scroll;
    left: 0;
    margin-right: -20px;
}
div.banner {
    height: 20px;
    background: -webkit-gradient(linear, center top, center bottom, from(white), to(rgba(255,255,255,0)));;
    margin-left: 20px;
    margin-right: 40px;
}

開発バージョン： http： //jsfiddle.net/mCYLm/13/
最終バージョン：http：//jsfiddle.net/mCYLm/14/

ズームと可変ビューポート幅で動作します。
！バグ：右上のスクロールバーボタンにアクセス/クリックできません。

テスト済み：

  • IE6、7、8、9（ウィンドウ）
  • FF11（Windows）
  • Google Chrome 18（ubuntu）
  • Safari 5.1（OSX）
于 2012-06-11T15:38:40.413 に答える