N-LAB

SimpleBarを利用してiOS (iPhone) でスクロールバーを常に表示する方法


目標

・スクロールバーの常時表示
・スクロールバーの色の変更

前提


目次

  1. SimpleBarとは
  2. スクロールバーの常時表示
  3. スクロールバーの色変更


SimpleBarとは



https://grsmto.github.io/simplebar/examples/

スクロールバーの常時表示



1. react用のSimpleBarをインストールします。

$ npm install simplebar-react


2. 任意のtsxファイルを新規作成し、以下の内容で保存します。

const App = () => {
  return (
    <ul style={{ width: 100, margin: 100 }} >
      {Array(100).fill('ListItem').map((val, i) => {
          return (
            <li key={i}>{val}: {i}</li>
          )
       })}
    </ul>
  )
}

export default App


3. li要素が100個出力されていることを確認します。
要素の確認

4. 作成したtsxファイルを以下の内容で修正して保存します。

// import文を追加
import SimpleBar from 'simplebar-react'
import 'simplebar-react/dist/simplebar.min.css'

const App = () => {
  return (
    <ul style={{ width: 100, margin: 100 }}>
      {/* SimpleBarタグを追加 */}
      <SimpleBar style={{ maxHeight: 200 }} forceVisible='y' autoHide={false}>
        {Array(100).fill('ListItem').map((val, i) => {
            return (
              <li key={i}>{val}: {i}</li>
            )
        })}
      </SimpleBar>
    </ul>
  )
}

export default App

※Next 13のapp directoryを利用している場合は、先頭行に「'use client'」を追記する必要があります。

5. スクロールバーが表示されてli要素が一度に8つまでしか表示されず、スクロールすることですべてのli要素が表示されることを確認します。iPhoneのsafariでページを表示した際に、スクロールバーが常時表示されていることも併せて確認します。
スクロールバーの確認
※SimpleBar タグで「forceVisible」と「autoHide」オプションを指定することにより、スクロールバーを常時表示します。オプションを設定することでスクロールバーをカスタマイズすることができます。指定できるオプションの詳細に関しては以下を参照ください。
https://github.com/Grsmto/simplebar/blob/master/packages/simplebar/README.md#options

スクロールバーの色変更


1. 任意のtsxファイルを新規作成し、以下の内容で保存します。

import SimpleBar from 'simplebar-react'
import 'simplebar-react/dist/simplebar.min.css'

const App = () => {
  return (
    <ul style={{ width: 100, margin: 100 }}>
      <SimpleBar style={{ maxHeight: 200 }} forceVisible='y' autoHide={false}>
        {Array(100).fill('ListItem').map((val, i) => {
            return (
              <li key={i}>{val}: {i}</li>
            )
        })}
      </SimpleBar>
    </ul>
  )
}

export default App


2. スクロールバーが表示されることを確認します。
スクロールバーの確認
3. cssに以下を追加します。

/* スクロールバーの背景色変更 */
.simplebar-track.simplebar-vertical {
  background: yellow;
}

/* スクロールバー本体の色変更 */
.simplebar-scrollbar::before {
  background: red;
}


4. スクロールバーの背景色が黄色、スクロールバーが赤色になっていることを確認します。
スクロールバーの色変更の確認

以上で全ての手順は完了になります