Skip to content

Commit a730ce8

Browse files
tmorehousetmorehouse
authored
docs(scrollspy): Updated live example
1 parent 45e3353 commit a730ce8

File tree

1 file changed

+86
-90
lines changed

1 file changed

+86
-90
lines changed

‎docs/directives/scrollspy/README.md

Lines changed: 86 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -8,107 +8,103 @@ element (i.e. `<body>`).
88

99
```html
1010
<template>
11-
<div style="height:410px;">
12-
<b-navbar v-b-scrollspy:scrollspy-example class="bg-faded" id="navbar-example">
13-
<b-link class="navbar-brand" href="#">
14-
<span>BootstrapVue <small>(Scrolling on div)</small></span>
15-
</b-link>
16-
<b-nav pills>
17-
<b-nav-item href="#fat" @click.stop="scrollIntoView($event)">@fat</b-nav-item>
18-
<b-nav-item href="#mdo" @click.stop="scrollIntoView($event)">@mdo</b-nav-item>
11+
<b-card>
12+
<b-nav pills slot="header" v-b-scrollspy:scrollspy-example>
13+
<b-nav-item href="#fat" @click="scrollIntoView">@fat</b-nav-item>
14+
<b-nav-item href="#mdo" @click="scrollIntoView">@mdo</b-nav-item>
1915
<b-nav-item-dropdown text="Dropdown 1,2,3" right-alignment>
20-
<b-dropdown-item href="#one" @click.stop="scrollIntoView($event)">one</b-dropdown-item>
21-
<b-dropdown-item href="#two" @click.stop="scrollIntoView($event)">two</b-dropdown-item>
16+
<b-dropdown-item href="#one" @click="scrollIntoView">one</b-dropdown-item>
17+
<b-dropdown-item href="#two" @click="scrollIntoView">two</b-dropdown-item>
2218
<b-dropdown-divider></b-dropdown-divider>
23-
<b-dropdown-item href="#three" @click.stop="scrollIntoView($event)">three</b-dropdown-item>
19+
<b-dropdown-item href="#three" @click="scrollIntoView">three</b-dropdown-item>
2420
</b-nav-item-dropdown>
25-
<b-nav-item href="#pi0" @click.stop="scrollIntoView($event)">@pi0</b-nav-item>
21+
<b-nav-item href="#pi0" @click="scrollIntoView">@pi0</b-nav-item>
2622
</b-nav>
27-
</b-navbar>
28-
<div id="scrollspy-example" style="position:relative; height:300px; overflow-y:scroll;">
29-
<p>
30-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sollicitudin
31-
scelerisque augue, sit amet finibus risus tempus quis. Suspendisse id est faucibus,
32-
dignissim arcu non, consequat tortor. Pellentesque mollis dolor vitae tellus
33-
consectetur auctor. Nam tincidunt ullamcorper tortor, a pretium tellus efficitur
34-
nec. Integer velit enim, mattis et sapien in, blandit pharetra nisi. Suspendisse
35-
euismod tortor ac tellus varius, a suscipit sapien viverra. Curabitur non
36-
nunc euismod, facilisis nulla a, auctor elit. Duis in est id augue scelerisque
37-
aliquam. Proin mollis dolor augue, nec pellentesque felis maximus nec.
38-
</p>
39-
<h4 id="fat">@fat</h4>
40-
<p v-for="i in 3">
41-
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they
42-
sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan.
43-
Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts,
44-
williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund
45-
culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel
46-
keffiyeh artisan ullamco consequat.
47-
</p>
48-
<h4 id="mdo">@mdo</h4>
49-
<p v-for="i in 4">
50-
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan
51-
beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla
52-
carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes
53-
anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn
54-
adipisicing craft beer vice keytar deserunt.
55-
</p>
56-
<h4 id="one">one</h4>
57-
<p v-for="i in 2">
58-
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle
59-
rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee
60-
in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork.
61-
Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in,
62-
sustainable delectus consectetur fanny pack iphone.
63-
</p>
64-
<h4 id="two">two</h4>
65-
<p v-for="i in 2">
66-
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan
67-
beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla
68-
carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes
69-
anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn
70-
adipisicing craft beer vice keytar deserunt.
71-
</p>
72-
<h4 id="three">three</h4>
73-
<p v-for="i in 3">
74-
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle
75-
rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee
76-
in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork.
77-
Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in,
78-
sustainable delectus consectetur fanny pack iphone.
79-
</p>
80-
<h4 id="pi0">@pi0</h4>
81-
<p v-for="i in 4">
82-
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan
83-
beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla
84-
carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes
85-
anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn
86-
adipisicing craft beer vice keytar deserunt.
87-
</p>
88-
</div>
89-
</div>
23+
<div id="scrollspy-example"
24+
ref="content"
25+
style="position:relative; height:300px; overflow-y:scroll;">
26+
<p>
27+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
28+
sollicitudin scelerisque augue, sit amet finibus risus tempus quis.
29+
Suspendisse id est faucibus, dignissim arcu non, consequat tortor.
30+
Pellentesque mollis dolor vitae tellus consectetur auctor. Nam tincidunt
31+
ullamcorper tortor, a pretium tellus efficitur nec. Integer velit enim,
32+
mattis et sapien in, blandit pharetra nisi. Suspendisse euismod tortor
33+
ac tellus varius, a suscipit sapien viverra. Curabitur non nunc euismod,
34+
facilisis nulla a, auctor elit. Duis in est id augue scelerisque
35+
aliquam. Proin mollis dolor augue, nec pellentesque felis maximus nec.
36+
</p>
37+
<h4 id="fat">@fat</h4>
38+
<p v-for="i in 5">
39+
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim
40+
lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights
41+
whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo
42+
booth 3 wolf moon irure. Veniam marfa mustache skateboard, adipisicing
43+
fugiat velit pitchfork beard.
44+
</p>
45+
<h4 id="mdo">@mdo</h4>
46+
<p v-for="i in 5">
47+
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork
48+
beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat
49+
four loko nisi, ea helvetica nulla carles. Facilisis nulla a, auctor
50+
elit. Duis in est id augue scelerisque aliquam. Proin mollis dolor
51+
augue, nec pellentesque felis maximus nec.
52+
</p>
53+
<h4 id="one">one</h4>
54+
<p v-for="i in 4">
55+
Echo park consequat quis aliquip banh mi pitchfork. Vero VHS est
56+
adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in,
57+
sustainable delectus consectetur fanny pack iphone. Lorem ipsum dolor
58+
sit amet, consectetur adipiscing elit. Vestibulum sollicitudin
59+
scelerisque augue, sit amet finibus risus tempus quis. Suspendisse
60+
id est faucibus, dignissim arcu non, consequat tortor.
61+
</p>
62+
<h4 id="two">two</h4>
63+
<p v-for="i in 4">
64+
Food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson
65+
+1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn
66+
adipisicing craft beer vice keytar deserunt. Anim keffiyeh carles
67+
cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.
68+
Facilisis nulla a, auctor elit. Duis in est id augue scelerisque aliquam.
69+
</p>
70+
<h4 id="three">three</h4>
71+
<p v-for="i in 6">
72+
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard
73+
ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level
74+
locavore single-origin coffee in magna veniam. High life id vinyl.
75+
Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko
76+
nisi, ea helvetica nulla carles.
77+
</p>
78+
<h4 id="pi0">@pi0</h4>
79+
<p v-for="i in 5">
80+
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork
81+
beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat
82+
four loko nisi, ea helvetica nulla carles. Tattooed crosby sweater
83+
food truck, mcsweeney's quis non freegan vinyl. Lorem ipsum dolor
84+
sit amet, consectetur adipiscing elit.
85+
</p>
86+
</div>
87+
</b-card>
9088
</template>
9189

9290
<script>
9391
export default {
94-
methods: {
95-
// Convenience method to scroll an element that is offscreen into view
96-
// Not required for ScrollSpy to work
97-
scrollIntoView($event) {
98-
const href = $event.target.getAttribute('href');
99-
if (href) {
100-
const el = document.querySelector(href);
101-
if (el) {
102-
el.scrollIntoView({
103-
behavior: 'smooth'
104-
});
105-
}
106-
}
107-
}
92+
methods: {
93+
// Convenience method to scroll an element that is offscreen into view
94+
// Not required for ScrollSpy to work
95+
scrollIntoView(evt) {
96+
evt.preventDefault();
97+
const href = evt.target.getAttribute('href');
98+
const el = href ? document.querySelector(href) : null;
99+
if (el) {
100+
this.$refs.content.scrollTop = el.offsetTop;
101+
}
108102
}
103+
}
109104
}
110105
</script>
111-
<!-- scrollspy.vue ->
106+
107+
<!-- scrollspy-1.vue -->
112108
```
113109

114110
**Note:** The directive is applied backwards compared to native Bootstrap V4.

0 commit comments

Comments
 (0)