mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-14 18:42:30 +03:00
Code Activity

Rewrite docs tables in Markdown with table shortcode (#31337)

Browse Source 
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: GeoSot <geo.sotis@gmail.com>
This commit is contained in:
Mark Otto
2022-03-14 00:38:04 -07:00
committed by GitHub
parent 8fe82c7176
commit a9a89debc7
22 changed files with 468 additions and 1956 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/5.1/components/scrollspy.md
+26 -73
View File
@@ -271,11 +271,30 @@ Navbar links must have resolvable id targets. For example, a `<a href="#home">ho
Target elements that are not visible will be ignored and their corresponding nav items will never be highlighted.
{{< /callout >}}
### Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-offset=""`.
{{< bs-table "table" >}}
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `offset` | number | `10` | Pixels to offset from top when calculating position of scroll. |
| `method` | string | `auto` | Finds which section the spied element is in. `auto` will choose the best method to get scroll coordinates. `offset` will use the [`Element.getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) method to get scroll coordinates. `position` will use the [`HTMLElement.offsetTop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop) and [`HTMLElement.offsetLeft`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft) properties to get scroll coordinates.` |
| `target` | string, jQuery object, DOM element | | Specifies element to apply Scrollspy plugin. |
{{< /bs-table >}}
### Methods
#### refresh
{{< bs-table "table" >}}
| Method | Description |
| --- | --- |
| `refresh` | When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method. |
| `dispose` | Destroys an element's scrollspy. (Removes stored data on the DOM element) |
| `getInstance` | *Static* method which allows, to get the scrollspy instance associated with a DOM element |
| `getOrCreateInstance` | *Static* method which allows, to get the scrollspy instance associated with a DOM element, or create a new one in case it wasn't initialized. |
{{< /bs-table >}}
When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:
Here's an example using the refresh method:
```js
var dataSpyList = Array.prototype.slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
@@ -285,79 +304,13 @@ dataSpyList.forEach(function (dataSpyEl) {
})
```
#### dispose
Destroys an element's scrollspy. (Removes stored data on the DOM element)
#### getInstance
*Static* method which allows you to get the scrollspy instance associated with a DOM element
```js
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
```
#### getOrCreateInstance
*Static* method which allows you to get the scrollspy instance associated with a DOM element, or create a new one in case it wasn't initialized
```js
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
```
### Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-offset=""`.
<table class="table">
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 100px;">Type</th>
<th style="width: 50px;">Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>offset</code></td>
<td>number</td>
<td><code>10</code></td>
<td>Pixels to offset from top when calculating position of scroll.</td>
</tr>
<tr>
<td><code>method</code></td>
<td>string</td>
<td><code>auto</code></td>
<td>Finds which section the spied element is in. <code>auto</code> will choose the best method to get scroll coordinates. <code>offset</code> will use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect"><code>Element.getBoundingClientRect()</code></a> method to get scroll coordinates. <code>position</code> will use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop"><code>HTMLElement.offsetTop</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft"><code>HTMLElement.offsetLeft</code></a> properties to get scroll coordinates.</td>
</tr>
<tr>
<td><code>target</code></td>
<td>string | jQuery object | DOM element</td>
<td></td>
<td>Specifies element to apply Scrollspy plugin.</td>
</tr>
</tbody>
</table>
### Events
<table class="table">
<thead>
<tr>
<th style="width: 150px;">Event type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>activate.bs.scrollspy</code></td>
<td>This event fires on the scroll element whenever a new item becomes activated by the scrollspy.</td>
</tr>
</tbody>
</table>
{{< bs-table "table" >}}
| Event | Description |
| --- | --- |
| `activate.bs.scrollspy` | This event fires on the scroll element whenever a new item becomes activated by the scrollspy. |
{{< /bs-table >}}
```js
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')