【css / javascript】スクロールバーが反応しない！？

先日、こんな感じ↓のレイアウトを作ろうとしました。

要素Aの子に横スクロールできる要素１があって、
要素２がその下にくっついてる感じです。

今回親要素にはposition: relative、要素１にはposition: absoluteが設定されてるので、要素２は要素１の高さの影響を受けません。
また、要素１の高ささをいろいろと変えたいので、親要素には高さを設定していません。
なのでそのままだと要素２は要素１に重なってしまいます。

これを回避するためにこんなスクリプトを当てていました。

$(function(){
    var youso1_height = $('#youso1').height();
    $('#youso2').css('top', youso1_height + 'px');
});

要素１の高さを要素２の位置（top）に設定します。
これできれいに縦に並んだぜ！やったぜ！と思いきや…

要素１のスクロールバーがまったく反応しない（押せない）事態が発生。
（表示はされてます）

これはどうしましょう…と会社の先輩方に相談したところ、
大変迅速に原因と対処法を頂いたのでまとめておきます。

原因

そもそもの原因は要素２がスクロールバーの上に重なってしまっていることでした。
要素が上に重なっていると、スクロールバーを押すことは出来ないみたいです。

今回は要素２のtopを要素１のheightと同じ値に設定していたのですが、
これは要素１と２が１ピクセルの隙間もなく縦に並ぶことを意味します。

一方でスクロールバーは要素１をちょっとはみ出た所に表示されるので、今回のようなことが起きてしまったのです。

ちなみに実験してみたのですが、
marginが重なるのはokでpaddingはダメでした。borderより内側ならダメということですね。

対処法

jsで設定する要素２のtopに適当な数字を足して、要素１との間に隙間をあけてやればOKです。

$(function(){
    var youso1_height = $('#youso1').height();
    var youso2_top = youso1_height;
    $('#youso2').css('top', youso2_top + 'px');
});

もしくは要素１にmargin-bottomを適当に設定して、heightでなくouterHeightを取得する方法でもOKです。

$(function(){
    var youso1_height = $('#youso1').outerHeight();
    $('#youso2').css('top', youso1_height + 'px');
});

まとめ

スクロールバーは、上にある要素のborderより内側が重なっていると押せない。

position:absoluteを使うときは要注意ですね…