xxxxxxxxxx
1
<hr class="mt-5">
2
3
<p>Built with <a target="_blank" href="https://mdbootstrap.com/docs/standard/">Material Design for Bootstrap</a> - free and powerful Bootstrap UI KIT</p>
4
5
<a class="btn btn-primary me-2" href="https://mdbootstrap.com/docs/standard/getting-started/installation/" target="_blank" role="button">Download MDB UI KIT <i class="fas fa-download ms-2"></i></a>
6
<a class="btn btn-danger me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/" role="button">Learn more</a>
7
<a class="btn btn-success me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/getting-started/" role="button">Tutorials</a>
8
<a class="btn btn-dark me-2" target="_blank" href="https://github.com/mdbootstrap/mdb-ui-kit" role="button">GitHub <i class="fab fa-github ms-2"></i></a>
9
10
<hr class="mb-5">
11
12
<div class="table-wrapper-scroll-y my-custom-scrollbar">
13
14
<table class="table table-bordered table-striped mb-0">
15
<thead>
16
<tr>
17
<th scope="col">#</th>
18
<th scope="col">First</th>
19
<th scope="col">Last</th>
20
<th scope="col">Handle</th>
21
</tr>
22
</thead>
23
<tbody>
24
<tr>
25
<th scope="row">1</th>
26
<td>Mark</td>
27
<td>Otto</td>
28
<td>@mdo</td>
29
</tr>
30
<tr>
31
<th scope="row">2</th>
32
<td>Jacob</td>
33
<td>Thornton</td>
34
<td>@fat</td>
35
</tr>
36
<tr>
37
<th scope="row">3</th>
38
<td>Larry</td>
39
<td>the Bird</td>
40
<td>@twitter</td>
41
</tr>
42
<tr>
43
<th scope="row">4</th>
44
<td>Mark</td>
45
<td>Otto</td>
46
<td>@mdo</td>
47
</tr>
48
<tr>
49
<th scope="row">5</th>
50
<td>Jacob</td>
51
<td>Thornton</td>
52
<td>@fat</td>
53
</tr>
54
<tr>
55
<th scope="row">6</th>
56
<td>Larry</td>
57
<td>the Bird</td>
58
<td>@twitter</td>
59
</tr>
60
</tbody>
61
</table>
62
63
</div>
xxxxxxxxxx
1
.my-custom-scrollbar {
2
position: relative;
3
width: 800px;
4
height: 200px;
5
overflow: auto;
6
}
7
.table-wrapper-scroll-y {
8
display: block;
9
}
xxxxxxxxxx
1
var myCustomScrollbar = document.querySelector('.my-custom-scrollbar');
2
Ps.initialize(myCustomScrollbar);
3
4
var scrollbarY = myCustomScrollbar.querySelector('.ps.ps--active-y>.ps__scrollbar-y-rail');
5
6
myCustomScrollbar.onscroll = function() {
7
scrollbarY.style.cssText = `top: ${this.scrollTop}px!important; height: 400px; right: ${-this.scrollLeft}px`;
8
}
Console errors: 0