ある要素が見える位置までスクロール

into_viewport という関数を作ってみた。

Chrome 以外ではチェックしてない。(でも IE 含め、他のブラウザで使えない関数などは使ってないはず)

IE に getComputedStyle が無いのを忘れてた。var s = getComputedStyle(elem, null); のところを var s = window.getComputedStyle ? getComputedStyle(elem, null) : elem.currentStyle; にしたらいいのかな? (IE 持ってないのでわからない)

微修正。body や html 要素に overflow:auto などが着いてると変なことになる件。あと、Firefox と Opera では互換モードのとき document.body.scrollTop が使えて、標準モードのときは document.documentElement.scrollTop を使わないといけない。Chrome と Safari は標準、互換とも document.body.scrollTop で OK。UserAgent で判定するのは不本意だけど、このへんは好きな判定方法を使ったらいい。

function into_viewport(elem) {
  var target = elem;

  while (elem = elem.parentNode) {
    if (elem === document.body || elem === document.documentElement) break;
    var s = window.getComputedStyle ? getComputedStyle(elem, null) : elem.currentStyle;
    if (s && /auto|scroll/.test(s.overflowX + s.overflowY)) {alert([target,elem]);
      scroll_to_element(target, elem);
      into_viewport(elem);
      return;
    }
  }

  var origin = (document.compatMode !== 'BackCompat' && (window.opera || navigator.userAgent.indexOf('Gecko/'))) ? document.documentElement : document.body;
  scroll_to_element(target, origin);
}

function scroll_to_element(elem, origin) {
  if (origin === document.body || origin === document.documentElement) {
    var outer = {left: 0, right: window.innerWidth, top: 0, bottom: window.innerHeight};
  } else {
    var outer = origin.getBoundingClientRect();
  }
  var inner = elem.getBoundingClientRect();
  var x = origin.scrollLeft;
  var y = origin.scrollTop;

  var flag = 0;
  if ((outer.left > inner.left || outer.right < inner.right) && ++flag)
    x += (inner.left + inner.right) / 2 - (outer.left + outer.right) / 2;
  if ((outer.top > inner.top || outer.bottom < inner.bottom) && ++flag)
    y += (inner.top + inner.bottom) / 2 - (outer.top + outer.bottom) / 2;

  //if (flag) {origin.scrollLeft = x; origin.scrollTop = y;}  // スムーズスクロールしない場合

  if (flag) new Tween(origin, { // スムーズスクロールする場合
    time: 0.1,
    scrollLeft: {
      to: x
    },
    scrollTop: {
      to: y
    }
  });
}