Scrollspy

Nuashonraigh go huathoibríoch nascleanúint Bootstrap nó liostaigh comhpháirteanna grúpa bunaithe ar shuíomh an scrolla chun a chur in iúl cén nasc atá gníomhach san amharclann faoi láthair.

Ar an leathanach seo

Conas a oibríonn sé

Tá roinnt riachtanas ag Scrollspy chun feidhmiú i gceart:

Ní mór é a úsáid ar chomhpháirt nascleanúna Bootstrap nó ar ghrúpa liostaí .
Éilíonn Scrollspy position: relative;ar an eilimint a bhfuil tú ag spying air, de ghnáth an <body>.
Tá ancairí ( <a>) ag teastáil agus ní mór dóibh gné a chur in iúl leis sin id.

Nuair a chuirtear i bhfeidhm go rathúil é, déanfaidh do ghrúpa nascleanúna nó liostaí nuashonrú dá réir, ag bogadh an .activerang ó mhír amháin go dtí an chéad cheann eile bunaithe ar na spriocanna a bhaineann leo.

Coimeádáin inscrollaithe agus rochtain mhéarchláir

Má tá coimeádán inscrollaithe á dhéanamh agat (seachas an <body>), cinntigh go bhfuil heighttacar agat agus overflow-y: scroll;go gcuirtear i bhfeidhm air — in éineacht le tabindex="0"a chun rochtain mhéarchláir a chinntiú.

Scrollaigh an limistéar faoi bhun an bharra nascleanúna agus féach ar an athrú gníomhach ranga. Cuirfear béim ar na míreanna anuas freisin.

An chéad cheannteideal

Seo roinnt ábhar áitshealbhóir don leathanach scrollspy. Tabhair faoi deara, agus tú ag scrollú síos an leathanach, go bhfuil an nasc loingseoireachta cuí aibhsithe. Déantar é a athdhéanamh ar fud an sampla comhpháirte. Leanaimid de bheith ag cur cóip shamplach níos mó anseo chun béim a chur ar an scrollú agus ar an aibhsiú.

An dara ceannteideal

An tríú ceannteideal

Ceathrú ceannteideal

An cúigiú ceannteideal

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading1">First</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading2">Second</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
        <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
      </ul>
    </li>
  </ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
  <h4 id="scrollspyHeading1">First heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading2">Second heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading3">Third heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading4">Fourth heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading5">Fifth heading</h4>
  <p>...</p>
</div>

Sampla le nav neadaithe

Oibríonn Scrollspy freisin le neadaithe .navs. .navMá tá nead .active, beidh a thuismitheoirí freisin .active. Scrollaigh an limistéar in aice leis an mbarra nascleanúna agus féach ar an athrú gníomhach ranga.

Mír 1

Mír 1-1

Mír 1-2

Mír 2

Mír 3

Mír 3-1

Mír 3-2

<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <nav class="nav nav-pills flex-column">
    <a class="nav-link" href="#item-1">Item 1</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
    </nav>
    <a class="nav-link" href="#item-2">Item 2</a>
    <a class="nav-link" href="#item-3">Item 3</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
  <h4 id="item-1">Item 1</h4>
  <p>...</p>
  <h5 id="item-1-1">Item 1-1</h5>
  <p>...</p>
  <h5 id="item-1-2">Item 1-2</h5>
  <p>...</p>
  <h4 id="item-2">Item 2</h4>
  <p>...</p>
  <h4 id="item-3">Item 3</h4>
  <p>...</p>
  <h5 id="item-3-1">Item 3-1</h5>
  <p>...</p>
  <h5 id="item-3-2">Item 3-2</h5>
  <p>...</p>
</div>

Sampla le liosta-ghrúpa

Oibríonn Scrollspy freisin le .list-groups. Scrollaigh an limistéar in aice leis an ngrúpa liosta agus féach ar an athrú gníomhach ranga.

Mír 1 Mír 2 Mír 3 Mír 4

Mír 1

Mír 2

Mír 3

Mír 4

<div id="list-example" class="list-group">
  <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
  <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
  <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
  <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
  <h4 id="list-item-1">Item 1</h4>
  <p>...</p>
  <h4 id="list-item-2">Item 2</h4>
  <p>...</p>
  <h4 id="list-item-3">Item 3</h4>
  <p>...</p>
  <h4 id="list-item-4">Item 4</h4>
  <p>...</p>
</div>

Úsáid

Trí tréithe sonraí

Chun iompar scrollspy a chur le do nascleanúint barrbharra go héasca, cuir data-bs-spy="scroll"leis an eilimint a bhfuil tú ag iarraidh spy a chur air (go hiondúil is é seo an <body>). Ansin cuir an data-bs-targettréith leis an ID nó aicme na máthaireiliminte d'aon .navchomhpháirt Bootstrap.

body {
  position: relative;
}

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Trí JavaScript

Tar éis position: relative;duit do CSS a chur isteach, cuir glaoch ar an scrollspy trí JavaScript:

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example'
})

Spriocanna aitheantais inréite ag teastáil

Caithfidh spriocanna aitheantais inréite a bheith ag naisc Navbar. Mar shampla, <a href="#home">home</a>ní mór a fhreagraíonn do rud éigin sa DOM cosúil le <div id="home"></div>.

Neamhaird ar sprioceilimintí dofheicthe

Ní thabharfar aird ar sprioc-eilimintí nach bhfuil infheicthe agus ní thaispeánfar a n-ítimí nascleanúna comhfhreagracha choíche.

Modhanna

athnuachan

Agus scrollspy in úsáid in éineacht le heilimintí a chur leis nó a bhaint den DOM, beidh ort an modh athnuachana a ghlaoch mar seo:

var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
  bootstrap.ScrollSpy.getInstance(dataSpyEl)
    .refresh()
})

a dhiúscairt

Scriosann scrollspy eilimint. (Baintear sonraí stóráilte ar an eilimint DOM)

faighInstance

Modh statach a cheadaíonn duit an t-ásc scrollspy a bhaineann le heilimint DOM a fháil

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

getOrCreateInstance

Modh statach a cheadaíonn duit an t-ásc scrollspy a bhaineann le heilimint DOM a fháil, nó ceann nua a chruthú ar eagla nár cuireadh tús leis

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

Roghanna

Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-bs-, mar atá i data-bs-offset="".

Ainm	Cineál	Réamhshocrú	Cur síos
`offset`	uimhir	`10`	Picteilíní le fritháireamh ón mbarr agus suíomh an scrolla á ríomh.
`method`	teaghrán	`auto`	Faightear cén chuid ina bhfuil an eilimint spied. `auto`roghnóidh sé an modh is fearr chun comhordanáidí scrollaithe a fháil. `offset`úsáidfidh sé an `Element.getBoundingClientRect()`modh chun comhordanáidí scrollaithe a fháil. `position`úsáidfidh an `HTMLElement.offsetTop`agus `HTMLElement.offsetLeft`airíonna chun comhordanáidí scrollbharra a fháil.
`target`	teaghrán \| réad jQuery \| eilimint DOM		Sonraítear eilimint chun breiseán Scrollspy a chur i bhfeidhm.

Imeachtaí

Cineál imeachta	Cur síos
`activate.bs.scrollspy`	Cuireann an teagmhas seo lasadh ar an eilimint scrollbharra aon uair a ghníomhaíonn an scrollspy mír nua.

var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})

Scrollspy

Conas a oibríonn sé

Coimeádáin inscrollaithe agus rochtain mhéarchláir

Sampla i navbar

An chéad cheannteideal

An dara ceannteideal

An tríú ceannteideal

Ceathrú ceannteideal

An cúigiú ceannteideal

Sampla le nav neadaithe

Mír 1

Mír 1-1

Mír 1-2

Mír 2

Mír 3

Mír 3-1

Mír 3-2

Sampla le liosta-ghrúpa

Mír 1

Mír 2

Mír 3

Mír 4

Úsáid

Trí tréithe sonraí

Trí JavaScript

Spriocanna aitheantais inréite ag teastáil

Neamhaird ar sprioceilimintí dofheicthe

Modhanna

athnuachan

a dhiúscairt

faighInstance

getOrCreateInstance

Roghanna

Imeachtaí