Bootstrap Snippet smooth scroll with pure js using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
<section data-scrollbar> <img src="https://placeimg.com/991/620/nature"></section>
    </div>
</div>
<script src="https://www.cssscript.com/demo/customizable-scrollbar-smooth-scroll-smooth-scrollbar/dist/smooth-scrollbar.js"></script>
<script>
Scrollbar.initAll();
</script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
section {
  width: 600px;
  height: 450px;
  overflow: auto;
  margin:20px auto;
}
/* scrollbar css */
scrollbar,
[scrollbar],
[data-scrollbar] {
  display: block;
  position: relative;
  overflow: scroll;
}
scrollbar .scroll-content,
[scrollbar] .scroll-content,
[data-scrollbar] .scroll-content {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  will-change: transform;
}
scrollbar.scrolling .scroll-content,
[scrollbar].scrolling .scroll-content,
[data-scrollbar].scrolling .scroll-content {
  pointer-events: none;
}
scrollbar.scrolling .scroll-content .scroll-content,
[scrollbar].scrolling .scroll-content .scroll-content,
[data-scrollbar].scrolling .scroll-content .scroll-content {
  pointer-events: auto;
}
scrollbar .scrollbar-track,
[scrollbar] .scrollbar-track,
[data-scrollbar] .scrollbar-track {
  position: absolute;
  opacity: 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"smooth scroll with pure js"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"smooth scroll with pure js" Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"smooth scroll with pure js"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY