スクロールスパイ

スクロール位置に基づいてBootstrapナビゲーションまたはリストグループコンポーネントを自動的に更新し、ビューポート内で現在どのリンクがアクティブであるかを示します。

How it works

  • nav component or list group 上で使用する必要があります。
  • Scrollspy は、対象の要素、通常は <body> の position: relative; を必要とします。
  • アンカー (b-a) は必須であり、その id を持つ要素を指す必要があります。

正常に実装されると、ナビやリストグループはそれに応じて更新され、active クラスは関連するターゲットに基づいて 1 つの項目から次の項目へと移動します。

Example

Navbar

ナビバーの下のエリアをスクロールして、アクティブなクラスの変化を見てください。ドロップダウン項目も同様にハイライトされます。

Navbar
vue
<template>
 <Navbar
  padding="x-3"
  background-color="body-tertiary"
 >
  <NavbarBrand>Navbar</NavbarBrand>
  <NavList
   nav="pills"
   spy="#navbar-target2"
  >
   <NavItem>
    <NavLink target="#scrollspyHeading1">
     First
    </NavLink>
   </NavItem>
   <NavItem>
    <NavLink target="#scrollspyHeading2">
     Link
    </NavLink>
   </NavItem>
   <NavItemDropdown>
    <NavItemDropdownToggle>Dropdown</NavItemDropdownToggle>
    <DropdownMenu>
     <DropdownItem target="#scrollspyHeading3">
      Third
     </DropdownItem>
     <DropdownItem target="#scrollspyHeading4">
      Fourth
     </DropdownItem>
     <DropdownItemDivider />
     <DropdownItem target="#scrollspyHeading5">
      Fifth
     </DropdownItem>
    </DropdownMenu>
   </NavItemDropdown>
  </NavList>
 </Navbar>
 <b-div
  id="navbar-target2"
  style="height: 200px; margin-top: 0.5rem; overflow: auto"
 >
  <h4 id="scrollspyHeading1">
   First heading
  </h4>
  <p>
   This is some placeholder content for the scrollspy page. Note that as you
   scroll down the page, the appropriate navigation link is highlighted. It's
   repeated throughout the component example. We keep adding some more
   example copy here to emphasize the scrolling and highlighting.
  </p>
  <h4 id="scrollspyHeading2">
   Second heading
  </h4>
  <p>
   This is some placeholder content for the scrollspy page. Note that as you
   scroll down the page, the appropriate navigation link is highlighted. It's
   repeated throughout the component example. We keep adding some more
   example copy here to emphasize the scrolling and highlighting.
  </p>
  <h4 id="scrollspyHeading3">
   Third heading
  </h4>
  <p>
   This is some placeholder content for the scrollspy page. Note that as you
   scroll down the page, the appropriate navigation link is highlighted. It's
   repeated throughout the component example. We keep adding some more
   example copy here to emphasize the scrolling and highlighting.
  </p>
  <h4 id="scrollspyHeading4">
   Fourth heading
  </h4>
  <p>
   This is some placeholder content for the scrollspy page. Note that as you
   scroll down the page, the appropriate navigation link is highlighted. It's
   repeated throughout the component example. We keep adding some more
   example copy here to emphasize the scrolling and highlighting.
  </p>
  <h4 id="scrollspyHeading5">
   Fifth heading
  </h4>
  <p>
   This is some placeholder content for the scrollspy page. Note that as you
   scroll down the page, the appropriate navigation link is highlighted. It's
   repeated throughout the component example. We keep adding some more
   example copy here to emphasize the scrolling and highlighting.
  </p>
 </b-div>
</template>

Nested Nav

Scrollspy は入れ子になった Nav コンポーネントでも動作します。

ネストされた Nav コンポーネントが active の場合、その親も active になります。

ナビバーの隣の領域をスクロールして、アクティブなクラスの変化は下記を参考にしてください。

vue
<template>
 <Row>
  <Col col="4">
   <Navbar
    padding="3"
    background-color="body-tertiary"
    align-items="stretch"
   >
    <Nav
     nav="pills"
     flex-direction="column"
     spy="#navbar-target3"
    >
     <NavLink target="#item-1">
      Item 1
     </NavLink>
     <Nav
      nav="pills"
      flex-direction="column"
      :parent="false"
     >
      <NavLink
       margin="s-3 y-1"
       target="#item-1-1"
      >
       Item 1-1
      </NavLink>
      <NavLink
       margin="s-3 y-1"
       target="#item-1-2"
      >
       Item 1-2
      </NavLink>
     </Nav>
     <NavLink target="#item-2">
      Item 2
     </NavLink>
     <NavLink target="#item-3">
      Item 3
     </NavLink>
     <Nav
      nav="pills"
      flex-direction="column"
      :parent="false"
     >
      <NavLink
       margin="s-3 y-1"
       target="#item-3-1"
      >
       Item 3-1
      </NavLink>
      <NavLink
       margin="s-3 y-1"
       target="#item-3-2"
      >
       Item 3-2
      </NavLink>
     </Nav>
    </Nav>
   </Navbar>
  </Col>
  <Col col="8">
   <b-div
    id="navbar-target3"
    style="height: 350px; margin-top: 0.5rem; overflow: auto"
   >
    <h4 id="item-1">
     Item 1
    </h4>
    <p>
     This is some placeholder content for the scrollspy page. Note that as
     you scroll down the page, the appropriate navigation link is
     highlighted. It's repeated throughout the component example. We keep
     adding some more example copy here to emphasize the scrolling and
     highlighting.
    </p>
    <h5 id="item-1-1">
     Item 1-1
    </h5>
    <p>
     This is some placeholder content for the scrollspy page. Note that as
     you scroll down the page, the appropriate navigation link is
     highlighted. It's repeated throughout the component example. We keep
     adding some more example copy here to emphasize the scrolling and
     highlighting.
    </p>
    <h5 id="item-1-2">
     Item 1-2
    </h5>
    <p>
     This is some placeholder content for the scrollspy page. Note that as
     you scroll down the page, the appropriate navigation link is
     highlighted. It's repeated throughout the component example. We keep
     adding some more example copy here to emphasize the scrolling and
     highlighting.
    </p>
    <h4 id="item-2">
     Item 2
    </h4>
    <p>
     This is some placeholder content for the scrollspy page. Note that as
     you scroll down the page, the appropriate navigation link is
     highlighted. It's repeated throughout the component example. We keep
     adding some more example copy here to emphasize the scrolling and
     highlighting.
    </p>
    <h4 id="item-3">
     Item 3
    </h4>
    <p>
     This is some placeholder content for the scrollspy page. Note that as
     you scroll down the page, the appropriate navigation link is
     highlighted. It's repeated throughout the component example. We keep
     adding some more example copy here to emphasize the scrolling and
     highlighting.
    </p>
    <h5 id="item-3-1">
     Item 3-1
    </h5>
    <p>
     This is some placeholder content for the scrollspy page. Note that as
     you scroll down the page, the appropriate navigation link is
     highlighted. It's repeated throughout the component example. We keep
     adding some more example copy here to emphasize the scrolling and
     highlighting.
    </p>
    <h5 id="item-3-2">
     Item 3-2
    </h5>
    <p>
     This is some placeholder content for the scrollspy page. Note that as
     you scroll down the page, the appropriate navigation link is
     highlighted. It's repeated throughout the component example. We keep
     adding some more example copy here to emphasize the scrolling and
     highlighting.
    </p>
   </b-div>
  </Col>
 </Row>
</template>

List group

Scrollspy は ListGroupList コンポーネントでも動作します。

リストグループの隣の領域をスクロールして、アクティブなクラスが変化するのは下記を参考にしてください。

Item 1 Item 2 Item 3 Item 4

Item 1

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Item 2

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Item 3

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Item 4

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

vue
<template>
 <Row>
  <Col col="4">
   <ListGroup spy="#list-example">
    <ListGroupItemAction target="#list-item-1">
     Item 1
    </ListGroupItemAction>
    <ListGroupItemAction target="#list-item-2">
     Item 2
    </ListGroupItemAction>
    <ListGroupItemAction target="#list-item-3">
     Item 3
    </ListGroupItemAction>
    <ListGroupItemAction target="#list-item-4">
     Item 4
    </ListGroupItemAction>
   </ListGroup>
  </Col>
  <Col col="8">
   <b-div
    id="list-example"
    offset="0"
    style="height: 200px; margin-top: 0.5rem; overflow: auto"
   >
    <h4 id="list-item-1">
     Item 1
    </h4>
    <p>
     This is some placeholder content for the scrollspy page. Note that as
     you scroll down the page, the appropriate navigation link is
     highlighted. It's repeated throughout the component example. We keep
     adding some more example copy here to emphasize the scrolling and
     highlighting.
    </p>
    <h4 id="list-item-2">
     Item 2
    </h4>
    <p>
     This is some placeholder content for the scrollspy page. Note that as
     you scroll down the page, the appropriate navigation link is
     highlighted. It's repeated throughout the component example. We keep
     adding some more example copy here to emphasize the scrolling and
     highlighting.
    </p>
    <h4 id="list-item-3">
     Item 3
    </h4>
    <p>
     This is some placeholder content for the scrollspy page. Note that as
     you scroll down the page, the appropriate navigation link is
     highlighted. It's repeated throughout the component example. We keep
     adding some more example copy here to emphasize the scrolling and
     highlighting.
    </p>
    <h4 id="list-item-4">
     Item 4
    </h4>
    <p>
     This is some placeholder content for the scrollspy page. Note that as
     you scroll down the page, the appropriate navigation link is
     highlighted. It's repeated throughout the component example. We keep
     adding some more example copy here to emphasize the scrolling and
     highlighting.
    </p>
   </b-div>
  </Col>
 </Row>
</template>

Simple anchors

スクロールスパイはナビコンポーネントやリストグループに限定されないため、現在のドキュメント内の任意のアンカー要素に対して機能します。領域をスクロールして、.activeクラスが変化するのを確認してください。

Item 1

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Item 2

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Item 3

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Item 4

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Item 5

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

vue
<template>
 <Row>
  <Col col="4">
   <list
    unstyled
    spy="#simple-list-example"
    flex
    flex-direction="column"
    gap="2"
    text-alignment="center"
    class="simple-list-example-scrollspy"
   >
    <list-item>
     <Anchor
      padding="1"
      rounded
      display="block"
      target="#simple-list-item-1"
     >
      Item 1
     </Anchor>
    </list-item>
    <list-item>
     <Anchor
      padding="1"
      rounded
      display="block"
      target="#simple-list-item-2"
     >
      Item 2
     </Anchor>
    </list-item>
    <list-item>
     <Anchor
      padding="1"
      rounded
      display="block"
      target="#simple-list-item-3"
     >
      Item 3
     </Anchor>
    </list-item>
    <list-item>
     <Anchor
      padding="1"
      rounded
      display="block"
      target="#simple-list-item-4"
     >
      Item 4
     </Anchor>
    </list-item>
    <list-item>
     <Anchor
      padding="1"
      rounded
      display="block"
      target="#simple-list-item-5"
     >
      Item 5
     </Anchor>
    </list-item>
   </list>
  </Col>
  <Col col="8">
   <b-div
    id="simple-list-example"
    style="height: 200px; margin-top: 0.5rem; overflow: auto"
   >
    <b-h4 id="simple-list-item-1">
     Item 1
    </b-h4>
    <b-p>
     This is some placeholder content for the scrollspy page. Note that as
     you scroll down the page, the appropriate navigation link is
     highlighted. It's repeated throughout the component example. We keep
     adding some more example copy here to emphasize the scrolling and
     highlighting.
    </b-p>
    <b-h4 id="simple-list-item-2">
     Item 2
    </b-h4>
    <b-p>
     This is some placeholder content for the scrollspy page. Note that as
     you scroll down the page, the appropriate navigation link is
     highlighted. It's repeated throughout the component example. We keep
     adding some more example copy here to emphasize the scrolling and
     highlighting.
    </b-p>
    <b-h4 id="simple-list-item-3">
     Item 3
    </b-h4>
    <b-p>
     This is some placeholder content for the scrollspy page. Note that as
     you scroll down the page, the appropriate navigation link is
     highlighted. It's repeated throughout the component example. We keep
     adding some more example copy here to emphasize the scrolling and
     highlighting.
    </b-p>
    <b-h4 id="simple-list-item-4">
     Item 4
    </b-h4>
    <b-p>
     This is some placeholder content for the scrollspy page. Note that as
     you scroll down the page, the appropriate navigation link is
     highlighted. It's repeated throughout the component example. We keep
     adding some more example copy here to emphasize the scrolling and
     highlighting.
    </b-p>
    <b-h4 id="simple-list-item-5">
     Item 5
    </b-h4>
    <b-p>
     This is some placeholder content for the scrollspy page. Note that as
     you scroll down the page, the appropriate navigation link is
     highlighted. It's repeated throughout the component example. We keep
     adding some more example copy here to emphasize the scrolling and
     highlighting.
    </b-p>
   </b-div>
  </Col>
 </Row>
</template>

<style>
.simple-list-example-scrollspy .active {
  background-color: var(--bs-blue-100)
}
</style>

Usage

Via data attributes

トップバーナビゲーションに scrollspy 動作を簡単に追加するには、スパイする要素に spy="scroll"を追加します（通常、これは <body>です）。

次に、Bootstrap Navコンポーネントの親要素の ID またはクラスを使用して target属性を追加します。

Resolvable ID targets required

ナビバーリンクは、id ターゲットを持たなければなりません。

例えば、<b-a href ="#home">home<b-a> は、<b-a href ="#home">home<b-a> のような DOM 内の何かに対応していなければなりません。

Non-visible target elements ignored

表示されていないターゲット要素は無視され、対応するナビ項目はハイライトされません。