備忘録

備忘録

OnsenUIのons-listを一番下までスクロールする方法

Onsen UI JavaScript

Ⅰ. はじめに

タイトルの通り「OnsenUIのons-listを一番下までスクロールする方法」です。

Ⅱ. やり方

サンプルプログラム

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
  <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
</head>
<body>
  <ons-page>
    <ons-list id="number-list">
      <ons-list-item>001</ons-list-item>
      <ons-list-item>002</ons-list-item>
      <ons-list-item>003</ons-list-item>
      <!-- 中略 -->
      <ons-list-item>010</ons-list-item>
    </ons-list>
  </ons-page>
  <script>
  let element = document.getElementById('number-list')
  // 一番下にスクロールさせる
  element.parentElement.scrollTop = element.parentElement.scrollHeight
  </script>
</body>
</html>

実行結果