スクロールの邪魔にならないようスクロール可能領域を最初はoverflow:hidden;にしておく

2012/10/27 20:25

ページをマウスでスクロールするとき、ページ内にあるスクロール可能領域にマウスカーソルがかぶってしまうと、ページではなくその領域がスクロールしてしまって使いづらいという問題があります。

Meity でもページの真ん中あたりにスケジュール調整機能が表示されるのですが、項目が増えるとその領域がスクロール可能領域になり、ページのスクロール時に同様の問題が生じてしまっていました。

そこで、「その領域をスクロールさせようとする人はおそらくマウスカーソルを数秒その領域にとどめるだろう」という仮説のもとに、「その領域を最初はスクロール不可能領域にしておいて、マウスでクリックされるかもしくは一定時間マウスがその領域に入っていたら、スクロール可能領域に変更する」というデザインに変更してみました。

↑ 最初はスクロールバーは表示されていませんが、

↑ しばらくマウスカーソルを置いているとこのようにスクロールバーが表示されます。

jQueryを使うと大体こんな感じのコードになります。

<style>
  #some-area { overflow: hidden; }
</style>

<div id="some-area">
  ...
</div>

<script>
$(function() {
  var timer;
  $('#some-area').mouseenter(function() {
    if (!timer) {
      timer = setTimeout(function() {
        $('#some-area').css('overflow', 'scroll');
      }, 2500);
    }
  }).mouseleave(function() {
    clearTimeout(timer);
    timer = null;
  }).click(function() {
    $('#some-area').css('overflow', 'scroll');
  });
});
</script>

#some-area は最初は overflow:hidden; なのでスクロールできず、マウスカーソルが2500ミリ秒その領域に滞在するか、クリックされることで overflow:scroll; に変わるのでスクロールできるようになります。

これならページをスクロールする時にうっかりマウスカーソルがかぶっても問題ないし、スケジュール調整の回答をしようとクリックした段階でその領域はスクロール可能になるし、そんなに問題ないかなと。

実装してから数週間、特に不都合は報告されていないので今のところ大丈夫なのかなと思いますが、何か問題がありましたらご連絡ください。