JavaScriptでScroll機能をざっくりと作ってみる

はじめに

HTMLの表などをスクロールする機能が必要になりました。
そこでとりあえずざっくりと作ってみました。
所々詰めが甘いところがありますが、記事にしてみます。

HTML および CSS

サンプルとして簡単ですが以下のようなHTMLとCSSを想定します。

HTML

HTML

<ul id="ul">
  <li id="0">item 0</li>
  <li id="1">item 1</li>
  <li id="2">item 2</li>
  <li id="3">item 3</li>
  <li id="4">item 4</li>
  <li id="5">item 5</li>
  <li id="6">item 6</li>
  <li id="7">item 7</li>
  <li id="8">item 8</li>
  <li id="9">item 9</li>
</ul>

CSS

CSS

ul {
  list-style: none;
  height: 64px;
  overflow-x: hidden;
  overflow-y: scroll;
}

li {
    height: 30px;
    border: black 1px solid;
}

ソース

現状?では、以下の両者に違いはないようです。

• scroll
• scrollTo

相対位置に移動する以下は、今回の実装では使えませんでした。

• scrollBy

また、要素の高さを表すプロパティとして以下がありますが

• clientHeight
• scrollHeight
• offsetHeight

これらは、CSSやHTMLとの構造によって使い分けが必要そうです。
とりあえず以下のようにしてみました。
https://jsfiddle.net で検証してみたところ問題なさそうです。
と書きましたが初稿では問題があったようです。(´・ω・`)

javascript

function getProperty(element, type) {
  return element[type]
}

function sumArrayToN(array, n) {
  let result = 0
  for (i = 0; i < n; ++i) {
    result += array[i]
  }
  return result
}

function getChildrenHeights(element) {
  const heights = []
  for (const child of element.children) {
    heights.push(child.offsetHeight)
    /*
    let result = {
      "clientHeight": getProperty(child, "clientHeight"),
      "scrollHeight": getProperty(child, "scrollHeight"),
      "offsetHeight": getProperty(child, "offsetHeight"), 
    }
    // console.log(result)
    heights.push(result)
    //*/    
  }
  return heights
}

function scrollUlTo(id, n) {
  const element = document.getElementById(id)
  const heights = getChildrenHeights(element)
  const scroll = sumArrayToN(heights, n)

  // element.scroll(0, scroll)
  element.scrollTo(0, scroll)
  // element.scrollBy(0, scroll) 駄目
}

scrollUlTo("ul", 8)
scrollUlTo("ul", 2)

最後に

あとは、実際に使ってみてより良いものにしていきたいと思います。