mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-22 13:13:03 +02:00
Code Issues Releases Wiki Activity

remove jquery in scrollspy docs

Browse Source
This commit is contained in:
Johann-S
2019-07-31 22:00:11 +02:00
parent cd21ca074e
commit 291bbac519
1 changed files with 20 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
site/content/docs/4.3/components/scrollspy.md
View File

@@ -252,7 +252,9 @@ body {
After adding `position: relative;` in your CSS, call the scrollspy via JavaScript: After adding `position: relative;` in your CSS, call the scrollspy via JavaScript:
{{< highlight js >}} {{< highlight js >}}
$('body').scrollspy({ target: '#navbar-example' }) var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
{{< /highlight >}} {{< /highlight >}}
{{< callout danger >}} {{< callout danger >}}
@@ -269,20 +271,31 @@ Target elements that are not visible will be ignored and their corresponding nav
### Methods ### Methods
#### `.scrollspy('refresh')` #### refresh
When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so: When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:
{{< highlight js >}} {{< highlight js >}}
$('[data-spy="scroll"]').each(function () { var dataSpyList = [].slice.call(document.querySelectorAll('[data-spy="scroll"]'))
var $spy = $(this).scrollspy('refresh') dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
}) })
{{< /highlight >}} {{< /highlight >}}
#### `.scrollspy('dispose')` #### dispose
Destroys an element's scrollspy. Destroys an element's scrollspy.
#### getInstance
*Static* method which allows you to get the scrollspy instance associated with a DOM element
{{< highlight js >}}
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
{{< /highlight >}}
### Options ### Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-offset=""`. Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-offset=""`.
@@ -336,7 +349,8 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
</table> </table>
{{< highlight js >}} {{< highlight js >}}
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () { var firstScrollSpyEl = document.querySelector('[data-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something... // do something...
}) })
{{< /highlight >}} {{< /highlight >}}