NiceSnippets.com
Bootstrap tab scroll with content usign bootstrap scrollspy
In this bootstrap scrollspy demo we try to explain how to wirk scrollspy. in this demo you can see when you scroll content at that time side bar tab is automatically scrolled. this is usefull when you scroll sidebar and content. and it's easy to implement. bootstrap scrollspy work with "popper.min.js". it can not be load in scrolling.
We allows to free snippets of bootstrap scrollspy vertical , you can download full code of bootstrap 4 scrollspy layout. Here in this post i will give you example of bootstrap scroll div snippet and you will get simple code of html, css and jquery. In bootstrap scrollspy smooth scroll snippet i give you three tab with html, css and js, you can easily get code of how to scroll sidebar with content with responsive layout.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="custom.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container main-section">
<div class="row">
<div class="col-lg-3 col-sm-3 col-4 scroll-left" id="myScrollspy">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link section1 text-info active" href="#section1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link section2 text-warning" href="#section2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link section3 text-primary" href="#section3">Section 3</a>
</li>
<li class="nav-item">
<a class="nav-link section4 text-success" href="#section4">Section 4</a>
</li>
</ul>
</div>
<div class="col-lg-9 col-sm-9 col-8 scroll-right" data-spy="scroll" data-target="#myScrollspy" data-offset="1">
<div class="bg-info" id="section1">
<h3>Section 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="bg-warning" id="section2">
<h3>Section 2</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="bg-primary" id="section3">
<h3>Section 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="bg-success" id="section4">
<h3>Section 4</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
body{
background:#A8A8A8;
}
.main-section{
border:1px solid #f1f1f1;
}
.scroll-right{
height:320px;
overflow-y:scroll;
padding: 0px !important;
color: #fff;
}
.scroll-right div{
padding: 15px;
}
#myScrollspy{
padding:0px;
}
.scroll-left ul li{
border-bottom:1px solid #f1f1f1;
}
.nav-pills .nav-link.active{
border-radius: 0px;
color: #fff !important;
}
.nav-pills .section1.active{
background: #17A2B8 !important;
}
.nav-pills .section2.active{
background: #FFC107 !important;
}
.nav-pills .section3.active{
background: #007BFF !important;
}
.nav-pills .section4.active{
background: #28A745 !important;
}
