1

別の div の表示部分の上にオーバーレイを表示するのに問題があります。問題は、コンテナ div にオーバーフローがあり、ユーザーがその div 内でスクロールした場合、オーバーレイがスクロールされた部分をカバーしないことです。私の質問は、jQuery を使用して別の div の表示部分を埋めるように div を配置するにはどうすればよいですか? あるいは、CSS だけを使用してこれを達成する方法はありますか?

これは jsFiddle デモンストレーションで、マークアップは次のとおりです。

HTML

<div class="container">
    <div class="overlay"></div>
    <div class="content">
        <p>Content here</p>
        <p>Overflow content here</p>        
    </div>
</div>

CSS

div.container { position: absolute; height: 100px; width: 100px; overflow-y: auto; }
div.overlay { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #F00; opacity: 0.5; }
div.content p { margin-bottom: 100px; }

および JS (DOM Ready にロード)

$('div.container').click(function(){
    $('div.overlay').toggle();
});
4

3 に答える 3

0

DOM プロパティを使用できますscrollHeight。

$('div.container').click(function(){
    $('div.overlay').css("height", this.scrollHeight).toggle();
});

http://jsfiddle.net/p6k2Z/1/

編集 ：

目に見える部分をオーバーレイするために、これを使用できます：

$('div.container').click(function(){
    $('div.overlay').css({
        top: this.scrollTop,
        height: $('div.container').css("height")})
    .toggle();
});

http://jsfiddle.net/p6k2Z/3/

于 2013-01-03T22:10:04.830 に答える