in English

Sgrolspy

Diweddaru llywio Bootstrap yn awtomatig neu restru cydrannau grŵp yn seiliedig ar safle sgrolio i nodi pa ddolen sy'n weithredol yn y porth gwylio ar hyn o bryd.

Sut mae'n gweithio

Mae gan Scrollspy ychydig o ofynion i weithredu'n iawn:

  • Os ydych chi'n adeiladu ein JavaScript o'r ffynhonnell, mae angenutil.js .
  • Rhaid ei ddefnyddio ar gydran llywio Bootstrap neu grŵp rhestr .
  • Scrollspy ei gwneud yn ofynnol position: relative;ar yr elfen yr ydych yn ysbïo ar, fel arfer y <body>.
  • Wrth ysbïo ar elfennau heblaw'r <body>, gofalwch eich bod yn cael heightset a overflow-y: scroll;chymhwyso.
  • Mae angen angorau ( <a>) a rhaid iddynt bwyntio at elfen gyda hynny id.

Pan gânt eu gweithredu'n llwyddiannus, bydd eich grŵp llywio neu restr yn diweddaru yn unol â hynny, gan symud y .activedosbarth o un eitem i'r llall yn seiliedig ar eu targedau cysylltiedig.

Enghraifft yn navbar

Sgroliwch yr ardal o dan y bar llywio a gwyliwch y newid dosbarth gweithredol. Bydd yr eitemau cwymplen yn cael eu hamlygu hefyd.

@braster

Cynnwys dalfan ar gyfer yr enghraifft sbïo sgrôl. Rydych chi wedi cael y bensaernïaeth orau. Stampiau pasbort, mae hi'n gosmopolitan. Gain, ffres, ffyrnig, rydym yn ei gael ar glo. Erioed wedi cynllunio y byddwn i'n colli chi un diwrnod. Mae hi'n bwyta'ch calon allan. Mae eich cusan yn gosmig, mae pob symudiad yn hud. Rwy'n golygu'r rhai, rwy'n golygu mai hi yw'r un. Cyfarchion anwyliaid gadewch i ni fynd ar daith. Dim ond yn berchen ar y noson fel y 4ydd o Orffennaf! Ond byddai'n well gennych gael eich gwastraffu.

@mdo

Cynnwys dalfan ar gyfer yr enghraifft sbïo sgrôl. 'Achos hi yw'r awen a'r artist. (Dyma sut rydyn ni'n gwneud) Felly rydych chi eisiau chwarae gyda hud. Felly gwnewch yn siŵr cyn i chi roi'r cyfan i mi. Rwy'n cerdded, rwy'n cerdded ar yr awyr (heno). Hepgor y sgwrs, clywed y cyfan, amser i gerdded y daith.

un

Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

two

Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.

three

Cynnwys dalfan ar gyfer yr enghraifft sbïo sgrôl. Os ydych chi eisiau dawnsio, os ydych chi eisiau'r cyfan, rydych chi'n gwybod mai fi yw'r ferch y dylech chi ei galw. Cerdded trwy'r storm byddwn i. Felly gadewch i mi eich cael chi yn eich siwt pen-blwydd. Yr un a aeth i ffwrdd. Nos Wener diwethaf, ie dwi'n meddwl ein bod ni wedi torri'r gyfraith, bob amser yn dweud ein bod ni'n mynd i stopio. Achos mae hi'n dipyn bach o Yoko, Ac mae hi'n dipyn bach o 'O na'. Dwi eisiau'r ên droppin', eye poppin', pen yn troi', body shocking'. Ie, fe wnaethom gynyddu ein cardiau credyd a chael ein cicio allan o'r bar.

A rhywfaint mwy o gynnwys dalfan, i fesur da.

<nav id="navbar-example2" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#one">one</a>
        <a class="dropdown-item" href="#two">two</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item" href="#three">three</a>
      </div>
    </li>
  </ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
  <h4 id="fat">@fat</h4>
  <p>...</p>
  <h4 id="mdo">@mdo</h4>
  <p>...</p>
  <h4 id="one">one</h4>
  <p>...</p>
  <h4 id="two">two</h4>
  <p>...</p>
  <h4 id="three">three</h4>
  <p>...</p>
</div>

Enghraifft gyda llywio nythu

Scrollspy hefyd yn gweithio gyda nythol .navs. .navOs yw nyth .active, bydd ei rieni hefyd .active. Sgroliwch yr ardal nesaf at y bar llywio a gwyliwch y newid dosbarth gweithredol.

Eitem 1

Cynnwys dalfan ar gyfer yr enghraifft sbïo sgrôl. Mae'r un hon yn ymwneud ag eitem 1. Mae'n mynd â chi filltiroedd o uchder, mor uchel, 'achos mae ganddi'r un wên ryngwladol honno. Mae yna ddieithryn yn fy ngwely, mae curo yn fy mhen. O na. Mewn bywyd arall byddwn yn gwneud i chi aros. 'Achos I, rwy'n gallu gwneud unrhyw beth. Yn addas ar gyfer fy mrwydr goroni. Wedi'i ddefnyddio i ddwyn gwirod eich rhieni a dringo i'r to. Tôn, tan heini a pharod, trowch ef i fyny achos ei gettin' trwm. Mae ei chariad fel cyffur. Mae'n debyg fy mod wedi anghofio fy mod wedi cael dewis.

Eitem 1-1

Cynnwys dalfan ar gyfer yr enghraifft sbïo sgrôl. Mae'r un hwn yn ymwneud ag eitem 1-1. Rydych chi wedi cael y bensaernïaeth orau. Stampiau pasbort, mae hi'n gosmopolitan. Gain, ffres, ffyrnig, rydym yn ei gael ar glo. Erioed wedi cynllunio y byddwn i'n colli chi un diwrnod. Mae hi'n bwyta'ch calon allan. Mae eich cusan yn gosmig, mae pob symudiad yn hud. Rwy'n golygu'r rhai, rwy'n golygu mai hi yw'r un. Cyfarchion anwyliaid gadewch i ni fynd ar daith. Dim ond yn berchen ar y noson fel y 4ydd o Orffennaf! Ond byddai'n well gennych gael eich gwastraffu.

Eitem 1-2

Placeholder content for the scrollspy example. This one relates to the item 1-2. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

Item 2

Placeholder content for the scrollspy example. This one relates to item 2. Don't need apologies. There is no fear now, let go and just be free, I will love you unconditionally. Last Friday night. Don't be a shy kinda guy I'll bet it's beautiful. Summer after high school when we first met. 'Cause she's the muse and the artist. What? Wait. No, no, no, no. Thought that I was the exception.

Item 3

Placeholder content for the scrollspy example. This one relates to item 3. Word on the street, you got somethin' to show me, me. All this money can't buy me a time machine. Make it like your birthday everyday. So we hit the boulevard. You make me feel like I'm livin' a teenage dream, the way you turn me on Skip the talk, heard it all, time to walk the walk. Word on the street, you got somethin' to show me, me. It's no big deal, it's no big deal, it's no big deal.

Item 3-1

Placeholder content for the scrollspy example. This one relates to item 3-1. Baby do you dare to do this? This is no big deal. Yeah, you're lucky if you're on her plane. Just own the night like the 4th of July! Standing on the frontline when the bombs start to fall. So just be sure before you give it all to me.

Item 3-2

Cynnwys dalfan ar gyfer yr enghraifft sbïo sgrôl. Mae'r un hwn yn ymwneud ag eitem 3-2. Rydych chi'n wreiddiol, ni ellir ei ddisodli. Trwy'r nos maen nhw'n chwarae, eich cân. Merched California rydym yn ddiymwad. Fel aderyn heb gawell. Nid oes ofn yn awr, gadewch i fynd a dim ond bod yn rhydd, byddaf yn caru chi yn ddiamod. Gallaf weld yr ysgrifen ar y wal. Fe allech chi deithio'r byd ond does dim byd yn dod yn agos at yr arfordir euraidd.

<nav id="navbar-example3" class="navbar navbar-light bg-light">
  <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 ml-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ml-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 ml-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

<div data-spy="scroll" data-target="#navbar-example3" data-offset="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>

Enghraifft gyda rhestr-grŵp

Scrollspy hefyd yn gweithio gyda .list-groups. Sgroliwch yr ardal nesaf at y grŵp rhestr a gwyliwch y newid dosbarth gweithredol.

Eitem 1

Cynnwys dalfan ar gyfer enghraifft y grŵp rhestr sgroliwr. Mae'r un hon yn ymwneud ag eitem 1. Nid oes angen ymddiheuriadau. Nid oes ofn yn awr, gadewch i fynd a dim ond bod yn rhydd, byddaf yn caru chi yn ddiamod. Nos Wener diweddaf. Peidiwch â bod yn foi math swil byddaf yn betio ei fod yn brydferth. Haf ar ôl ysgol uwchradd pan wnaethom gyfarfod gyntaf. 'Achos hi yw'r awen a'r artist. Beth? Arhoswch. Wedi meddwl mai fi oedd yr eithriad.

Eitem 2

Cynnwys dalfan ar gyfer enghraifft y grŵp rhestr sgroliwr. Mae'r un hon yn ymwneud ag eitem 2. Ydy, mae hi'n dawnsio i'w churiad ei hun. O na. Gallech fod wedi bod y mwyaf. 'Achos, babi, rydych chi'n dân gwyllt. Efallai mai rheswm pam fod yr holl ddrysau ar gau. Agorwch eich calon a gadewch iddo ddechrau. Felly très chic, ie, mae hi'n glasur.

Eitem 3

Cynnwys dalfan ar gyfer enghraifft y grŵp rhestr sgroliwr. Mae'r un hwn yn ymwneud ag eitem 3. Rydym yn mynd yn uwch ac yn uwch. Peidiwch byth â'r naill heb y llall, fe wnaethom gytundeb. Rwy'n cerdded ar yr awyr. Dywedodd rhywun eich bod wedi tynnu eich tatŵ. Nawr rwy'n arnofio fel pili pala. Tôn, tan heini a pharod, trowch ef i fyny achos ei gettin' trwm. Achos unwaith y byddwch yn fy un i, unwaith y byddwch yn fy un i. Mae'n rhaid i chi danio'r golau a gadael iddo ddisgleirio! Felly dyma ni'n taro'r rhodfa. Ydych chi byth yn teimlo, yn teimlo mor denau papur. Rwy'n gweld y cyfan, rwy'n ei weld nawr.

Eitem 4

Cynnwys dalfan ar gyfer enghraifft y grŵp rhestr sgroliwr. Mae'r un hwn yn ymwneud ag eitem 4. Haf ar ôl ysgol uwchradd pan wnaethom gyfarfod gyntaf. Nid oes ofn yn awr, gadewch i fynd a dim ond bod yn rhydd, byddaf yn caru chi yn ddiamod. Croen wedi'i gusanu gan yr haul mor boeth byddwn yn toddi'ch popsicle. Bydd y cariad hwn yn gwneud ichi levitate.

<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-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
  <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>

Defnydd

Trwy briodoleddau data

Er mwyn ychwanegu ymddygiad ysbïwr sgrolio at eich llywio bar uchaf yn hawdd, ychwanegwch data-spy="scroll"at yr elfen rydych chi am sbïo arno (yn fwyaf nodweddiadol dyma fyddai'r <body>). Yna ychwanegwch y data-targetpriodoledd gyda'r ID neu ddosbarth y rhiant elfen o unrhyw .navgydran Bootstrap.

body {
  position: relative;
}

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

Trwy JavaScript

Ar ôl ychwanegu'ch position: relative;CSS, ffoniwch y sgroliwr trwy JavaScript:

$('body').scrollspy({ target: '#navbar-example' })

Angen targedau ID y gellir eu datrys

Rhaid i ddolenni Navbar gael targedau adnabod y gellir eu datrys. Er enghraifft, <a href="#home">home</a>rhaid cyfateb i rywbeth yn y DOM fel <div id="home"></div>.

:visibleAnwybyddir elfennau nad ydynt yn darged

Bydd elfennau targed nad ydynt yn :visibleunol â jQuery yn cael eu hanwybyddu ac ni fydd eu heitemau llywio cyfatebol byth yn cael eu hamlygu.

Dulliau

.scrollspy('refresh')

Wrth ddefnyddio scrollspy ar y cyd ag ychwanegu neu dynnu elfennau o'r DOM, bydd angen i chi ffonio'r dull adnewyddu fel hyn:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

.scrollspy('dispose')

Yn dinistrio sgrôlsbïwr elfen.

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-, fel yn data-offset="".

Enw Math Diofyn Disgrifiad
gwrthbwyso rhif 10 Picseli i'w gwrthbwyso o'r brig wrth gyfrifo lleoliad y sgrôl.
dull llinyn auto Yn darganfod ym mha adran mae'r elfen ysbïedig. autoBydd yn dewis y dull gorau o gael cyfesurynnau sgrolio. offsetyn defnyddio dull gwrthbwyso jQuery i gael cyfesurynnau sgrolio. positionyn defnyddio dull lleoli jQuery i gael cyfesurynnau sgrolio.
targed llinyn | jQuery gwrthrych | elfen DOM Yn pennu elfen i wneud cais Scrollspy plugin.

Digwyddiadau

Math o Ddigwyddiad Disgrifiad
activate.bs.scrollspy Mae'r digwyddiad hwn yn tanio'r elfen sgrolio pryd bynnag y bydd eitem newydd yn cael ei actifadu gan y sgrôlspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})