xxxxxxxxxx1
<div class="container-fluid" style="background-color: rgba(3, 169, 244, 0.1);">2
<div class="row">3
<div class="col-md-12 pt-5">4
<h1 class="text-center">5
Perfect Scrollbar6
</h1>7
<p class="text-center">8
Minimalistic but perfect custom scrollbar plugin9
</p>10
11
<div data-mdb-perfect-scrollbar='true' id="demo" class="mx-auto my-5">12
<div class="p-5 white rgba-white-strong rounded" style="width:1200px; background-color: #ffffff;">13
<h2 class="font-weight-bold text-center">Hello I'm a piece of example content!</h2>14
<p class="lead mb-3 text-center ">You can just scroll through me and marvel at the perfection of this15
scrollbar, but16
I'm also full of surprises!</p>17
18
<section class="my-4">19
<hr>20
<div class="row mt-3 justify-content-center">21
<div class="col-3">22
<!-- Card -->23
<div class="card">24
25
<!-- Card image -->26
<div class="view overlay">27
<img class="card-img-top"28
src="https://mdbcdn.b-cdn.net/img/new/standard/nature/111.jpg"29
alt="Card image cap">30
<a href="#!">31
<div class="mask rgba-white-slight"></div>32
</a>33
</div>34
35
<!-- Card content -->36
<div class="card-body">37
38
<!-- Title -->39
<h4 class="card-title">I'm a pretty card</h4>40
<!-- Text -->41
<p class="card-text">I'm very pretty and I have a pretty blue button, but it42
contains nothing,43
only44
animated waves. I'm a sad,45
pretty card.</p>46
<!-- Button -->47
<button href="#" class="btn btn-primary">Button</button>48
49
</div>50
51
</div>52
<!-- Card -->53
</div>54
<div class="col-3">55
<!-- Card -->56
<div class="card">57
58
<!-- Card image -->59
<div class="view overlay">60
<img class="card-img-top"61
src="https://mdbcdn.b-cdn.net/img/new/fluid/city/113.jpg"62
alt="Card image cap">63
<a href="#!">64
<div class="mask rgba-white-slight"></div>65
</a>66
</div>67
68
<!-- Card content -->69
<div class="card-body">70
71
<!-- Title -->72
<h4 class="card-title">I'm also pretty</h4>73
<!-- Text -->74
<p class="card-text">I'm very pretty and I have a pretty purple button, it75
contains a link to a76
<strong>Bootstrap tutorial</strong>. I'm a happy,77
pretty card.</p>78
<!-- Button -->79
<button type="button"80
class="btn btn-secondary">Button</button>81
82
</div>83
84
</div>85
<!-- Card -->86
</div>87
<div class="col-3">88
<!-- Card -->89
<div class="card">90
91
<!-- Card image -->92
<div class="view overlay">93
<img class="card-img-top"94
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(55).jpg"95
alt="Card image cap">96
<a href="#!">97
<div class="mask rgba-white-slight"></div>98
</a>99
</div>100
101
<!-- Card content -->102
<div class="card-body">103
104
<!-- Title -->105
<h4 class="card-title">I'm also happy</h4>106
<!-- Text -->107
<p class="card-text">I'm very pretty and I have a pretty mdb-color button. It'108
leads to109
<strong>Admin110
Dashboard building tutorial</strong>. I'm a happy,111
pretty card.</p>112
<!-- Button -->113
<button type="button"114
class="btn btn-success">Button</button>115
116
</div>117
118
</div>119
<!-- Card -->120
</div>121
<div class="col-3">122
<!-- Card -->123
<div class="card">124
125
<!-- Card image -->126
<div class="view overlay">127
<img class="card-img-top"128
src="https://mdbcdn.b-cdn.net/img/new/fluid/city/102.jpg"129
alt="Card image cap">130
<a href="#!">131
<div class="mask rgba-white-slight"></div>132
</a>133
</div>134
135
<!-- Card content -->136
<div class="card-body">137
138
<!-- Title -->139
<h4 class="card-title font-weight-bold">I made y'all</h4>140
<!-- Text -->141
<p class="card-text">I'm very pretty and my button let's you download a 142
<strong>free UI143
Kit</strong>144
with145
pretty, happy cards & over 500 of other material components!</p>146
<!-- Button -->147
<button type="button"148
class="btn btn-danger">Button</button>149
150
</div>151
152
</div>153
<!-- Card -->154
</div>155
</div>156
</section>157
158
<section class="my-4 text-center">159
<hr>160
<h3>We are beautiful and colorful</h3>161
<p class="lead mb-3">We are some material scrollbars that could help you make your apps and162
projects even more163
perfect!</p>164
<a target="_blank" href="https://mdbootstrap.com/docs/standard/methods/scrollbar/"165
class="btn btn-sm btn-primary rounded mb-3">Learn166
more about us!</a>167
<div class="row mt-3 justify-content-center">168
169
<div class="scrollbar scrollbar-primary">170
<div class="force-overflow"></div>171
</div>172
<div class="scrollbar scrollbar-secondary">173
<div class="force-overflow"></div>174
</div>175
<div class="scrollbar scrollbar-default">176
<div class="force-overflow"></div>177
</div>178
<div class="scrollbar scrollbar-info">179
<div class="force-overflow"></div>180
</div>181
<div class="scrollbar scrollbar-success">182
<div class="force-overflow"></div>183
</div>184
<div class="scrollbar scrollbar-warning">185
<div class="force-overflow"></div>186
</div>187
188
</div>189
</section>190
191
<section class="my-4 text-center">192
<hr>193
<h3>I'm a picture of a boar</h3>194
<p class="lead mb-3">That's enough for me.</p>195
<div class="row mt-3 justify-content-center">196
<img src="https://upload.wikimedia.org/wikipedia/commons/0/01/Sus_scrofa_cristatus.jpg"197
class="img-fluid z-depth-1" alt="1">198
199
</div>200
</section>201
202
<section class="my-4 text-center">203
<hr>204
<h3>I'm a basic Material Design sign-up form</h3>205
<p class="lead mb-3">Click on my button to learn more about me!</p>206
<div class="row mt-3 justify-content-center">207
<!-- Default form register -->208
<form class="text-center border border-light p-5">209
210
<p class="h4 mb-4">Sign up</p>211
212
<div class="form-row mb-4">213
<div class="col mb-4">214
<!-- First name -->215
<input type="text" id="defaultRegisterFormFirstName" class="form-control"216
placeholder="First name">217
</div>218
<div class="col">219
<!-- Last name -->220
<input type="text" id="defaultRegisterFormLastName" class="form-control"221
placeholder="Last name">222
</div>223
</div>224
225
<!-- E-mail -->226
<input type="email" id="defaultRegisterFormEmail" class="form-control mb-4"227
placeholder="E-mail">228
229
<!-- Password -->230
<input type="password" id="defaultRegisterFormPassword" class="form-control"231
placeholder="Password" aria-describedby="defaultRegisterFormPasswordHelpBlock">232
<small id="defaultRegisterFormPasswordHelpBlock" class="form-text text-muted mb-4">233
At least 8 characters and 1 digit234
</small>235
236
<!-- Phone number -->237
<input type="text" id="defaultRegisterPhonePassword" class="form-control"238
placeholder="Phone number" aria-describedby="defaultRegisterFormPhoneHelpBlock">239
<small id="defaultRegisterFormPhoneHelpBlock" class="form-text text-muted mb-4">240
Optional - for two step authentication241
</small>242
243
<!-- Newsletter -->244
<div class="custom-control custom-checkbox">245
<input type="checkbox" class="custom-control-input"246
id="defaultRegisterFormNewsletter">247
<label class="custom-control-label" for="defaultRegisterFormNewsletter">Subscribe to248
our249
newsletter</label>250
</div>251
252
<!-- Sign up button -->253
<a target="_blank" href="https://mdbootstrap.com/docs/jquery/forms/basic/"254
class="btn btn-info my-4 btn-block">LEARN MORE255
ABOUT ME</a>256
257
<!-- Social register -->258
<p>or follow us on:</p>259
260
<a target="_blank" href="https://www.facebook.com/mdbootstrap" class="light-blue-text mx-2">261
<i class="fab fa-facebook-f"></i>262
</a>263
<a target="_blank" href="https://twitter.com/mdbootstrap" class="light-blue-text mx-2">264
<i class="fab fa-twitter"></i>265
</a>266
<a target="_blank" href="https://www.linkedin.com/company/material-design-for-bootstrap/"267
class="light-blue-text mx-2">268
<i class="fab fa-linkedin-in"></i>269
</a>270
<a target="_blank" href="https://github.com/mdbootstrap" class="light-blue-text mx-2">271
<i class="fab fa-github"></i>272
</a>273
274
<hr>275
276
<!-- Terms of service -->277
<p>By clicking278
<em>Sign up</em> you agree to our279
<a href="" target="_blank">terms of service</a>280
281
</form>282
<!-- Default form register -->283
284
</div>285
</section>286
287
<section class="my-4 text-center">288
<hr>289
<h3>We are leading Web Development technologies</h3>290
<p class="lead mb-3">Click on us if you're interested about learning more or getting our291
beautiful components292
for free.</p>293
<div class="row mt-3 justify-content-center">294
<div class="col-md-3">295
<!-- Card -->296
<div class="card card-image"297
style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg);">298
299
<!-- Content -->300
<div301
class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">302
<div>303
<a304
target="_blank" href="https://mdbootstrap.com/docs/standard/"><img305
src="https://mdbootstrap.com/img/Marketing/general/logo/small/bootstrap.png"></a>306
307
<h3 class="card-title pt-2 font-weight-bold"><strong>Standard Bootstrap</strong></h3>308
<p>Get beautiful components and useful features by clicking the button309
below.</p>310
<a target="_blank" href="https://mdbootstrap.com/docs/standard/"311
class="btn btn-primary"><i class="fas fa-clone me-2"></i>Learn more</a>312
</div>313
</div>314
315
</div>316
<!-- Card -->317
</div>318
<div class="col-md-3">319
<!-- Card -->320
<div class="card card-image"321
style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg);">322
323
<!-- Content -->324
<div325
class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">326
<div>327
<a328
target="_blank" href="https://mdbootstrap.com/docs/b5/angular/"><img329
src="https://mdbootstrap.com/img/Marketing/general/logo/small/angular.png"></a>330
<h3 class="card-title pt-2 font-weight-bold"><strong>Angular</strong></h3>331
<p>Get beautiful components and useful features by clicking the button332
below.</p>333
<a target="_blank" href="https://mdbootstrap.com/docs/b5/angular/"334
class="btn btn-danger"><i class="fas fa-clone me-2"></i>Learn more</a>335
</div>336
</div>337
338
</div>339
<!-- Card -->340
</div>341
<div class="col-md-3">342
<!-- Card -->343
<div class="card card-image"344
style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg);">345
346
<!-- Content -->347
<div348
class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">349
<div>350
<a351
target="_blank" href="https://mdbootstrap.com/docs/b5/react/"><img352
src="https://mdbootstrap.com/img/Marketing/general/logo/small/react.png"></a>353
<h3 class="card-title pt-2 font-weight-bold"><strong>React</strong></h3>354
<p>Get beautiful components and useful features by clicking the button355
below.</p>356
<a target="_blank" href="https://mdbootstrap.com/docs/b5/react/"357
class="btn btn-info"><i class="fas fa-clone me-2"></i>Learn more</a>358
</div>359
</div>360
361
</div>362
<!-- Card -->363
</div>364
<div class="col-md-3">365
<!-- Card -->366
<div class="card card-image"367
style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg);">368
369
<!-- Content -->370
<div371
class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">372
<div>373
<a374
target="_blank" href="https://mdbootstrap.com/docs/b5/vue/"><img375
src="https://mdbootstrap.com/img/Marketing/general/logo/small/vue.png"></a>376
<h3 class="card-title pt-2 font-weight-bold"><strong>Vue</strong></h3>377
<p>Get beautiful components and useful features by clicking the button378
below.</p>379
<a target="_blank" href="https://mdbootstrap.com/docs/b5/vue/"380
class="btn btn-green"><i class="fas fa-clone me-2"></i>Learn more</a>381
</div>382
</div>383
384
</div>385
<!-- Card -->386
</div>387
388
389
</div>390
</section>391
392
<section class="my-4 text-center">393
<hr>394
<h3>I'm saying goodbye!</h3>395
<p class="lead mb-3">Beeing scrolled by you was a pleasure, I hope I'll396
see you soon at <a397
target="_blank" href="https://mdbootstrap.com/">mdbootstrap.com</a>398
</p>399
</section>400
401
402
403
404
</div>405
</div>406
407
<ul class="list-unstyled text-center mx-auto" style="max-width: 20em;">408
<li>409
<div class="form-outline">410
<input type="number" id="width" value="800" class="form-control">411
<label class="form-label" for="width">Width</label>412
</div>413
</li>414
<li class="mt-3">415
<div class="form-outline">416
<input type="number" id="height" value="400" class="form-control">417
<label class="form-label">Height</label>418
</div>419
</li>420
<li>421
<button id="resize" class="btn btn-primary my-4">Change size<i class="fas fa-expand ms-2"></i></button>422
</li>423
<li>424
<a target="_blank" href="https://mdbootstrap.com/perfect-scrollbar/" class="mt-4 btn btn-sm btn-outline-primary btn-rounded"><i class="fas fa-caret-square-left me-2"></i>Back to docs</a>425
</li>426
</ul> 427
</div> 428
</div>429
<div class="row">430
<div class="col-md-12 text-center mb-5">431
<hr>432
<h2>433
Related434
</h2>435
<p class="text-center">436
Useful assets related to Perfect Scrollbar437
</p>438
<a target="_blank" class="btn btn-secondary" href="https://mdbootstrap.com/docs/standard/methods/scrollbar/">Scrollbar</a>439
<a target="_blank" class="btn btn-secondary" href="https://mdbootstrap.com/docs/standard/plugins/scroll-status/">Scroll status</a>440
<a target="_blank" class="btn btn-secondary" href="https://mdbootstrap.com/docs/standard/methods/smooth-scroll/">Smooth scroll</a>441
<a target="_blank" class="btn btn-danger" href="https://mdbootstrap.com/docs/standard/methods/scrollbar/">Material scrollbars</a>442
</div>443
</div>444
</div>xxxxxxxxxx1
#demo {2
position: relative;3
width: 800px;4
height: 400px;5
overflow: auto;6
}7
8
.scrollbar {9
margin-left: 30px;10
float: left;11
height: 300px;12
width: 65px;13
background: #fff;14
overflow-y: scroll;15
margin-bottom: 25px;16
}17
.force-overflow {18
min-height: 450px;19
}20
21
.scrollbar-primary::-webkit-scrollbar {22
width: 12px;23
background-color: #F5F5F5; }24
25
.scrollbar-primary::-webkit-scrollbar-thumb {26
border-radius: 10px;27
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);28
background-color: #4285F4; }29
30
.scrollbar-danger::-webkit-scrollbar-track {31
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);32
background-color: #F5F5F5;33
border-radius: 10px; }34
35
.scrollbar-danger::-webkit-scrollbar {36
width: 12px;37
background-color: #F5F5F5; }38
39
.scrollbar-danger::-webkit-scrollbar-thumb {40
border-radius: 10px;41
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);42
background-color: #ff3547; }43
44
.scrollbar-warning::-webkit-scrollbar-track {45
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);46
background-color: #F5F5F5;47
border-radius: 10px; }48
49
.scrollbar-warning::-webkit-scrollbar {50
width: 12px;51
background-color: #F5F5F5; }52
53
.scrollbar-warning::-webkit-scrollbar-thumb {54
border-radius: 10px;55
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);56
background-color: #FF8800; }57
58
.scrollbar-success::-webkit-scrollbar-track {59
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);60
background-color: #F5F5F5;61
border-radius: 10px; }62
63
.scrollbar-success::-webkit-scrollbar {64
width: 12px;65
background-color: #F5F5F5; }66
67
.scrollbar-success::-webkit-scrollbar-thumb {68
border-radius: 10px;69
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);70
background-color: #00C851; }71
72
.scrollbar-info::-webkit-scrollbar-track {73
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);74
background-color: #F5F5F5;75
border-radius: 10px; }76
77
.scrollbar-info::-webkit-scrollbar {78
width: 12px;79
background-color: #F5F5F5; }80
81
.scrollbar-info::-webkit-scrollbar-thumb {82
border-radius: 10px;83
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);84
background-color: #33b5e5; }85
86
.scrollbar-default::-webkit-scrollbar-track {87
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);88
background-color: #F5F5F5;89
border-radius: 10px; }90
91
.scrollbar-default::-webkit-scrollbar {92
width: 12px;93
background-color: #F5F5F5; }94
95
.scrollbar-default::-webkit-scrollbar-thumb {96
border-radius: 10px;97
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);98
background-color: #2BBBAD; }99
100
.scrollbar-secondary::-webkit-scrollbar-track {101
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);102
background-color: #F5F5F5;103
border-radius: 10px; }104
105
.scrollbar-secondary::-webkit-scrollbar {106
width: 12px;107
background-color: #F5F5F5; }108
109
.scrollbar-secondary::-webkit-scrollbar-thumb {110
border-radius: 10px;111
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);112
background-color: #aa66cc; }xxxxxxxxxx1
// Initialize the plugin2
const demo = document.querySelector('#demo');3
const ps = new PerfectScrollbar(demo);4
5
// Handle size change6
document.querySelector('#resize').addEventListener('click', () => {7
8
// Get updated values9
width = document.querySelector('#width').value;10
height = document.querySelector('#height').value;11
12
// Set demo sizes13
demo.style.width = `${width}px`;14
demo.style.height = `${height}px`;15
16
// Update Perfect Scrollbar17
ps.update();18
}); Console errors: 0