$(function() {
var parent = document.querySelector('.scrollspy-h-container');
var parentDimensions = parent.getBoundingClientRect();
var parentX = parentDimensions.x;
parent.querySelectorAll('.nav-link').forEach(function(item, index, array) {
item.setAttribute('aria-controls', item.href);
item.classList.remove('active');
array[0].classList.add('active');
});
parent.addEventListener('scroll', function () {
var items = document.querySelectorAll('.scrollspy-h-item');
var arr = [];
items.forEach(function (item, index, array) {
var itemDimensions = item.getBoundingClientRect();
var itemX = itemDimensions.x;
arr[index] = itemX;
var itemId = item.id;
var itemBtn = document.querySelector('a[href="#' + itemId + '"]');
itemBtn.setAttribute('data-index', index);
itemBtn.classList.contains('active') && itemBtn.classList.remove('active');
});
var closest = arr.reduce(function(prev, curr, index, array) {
return (Math.abs(curr - parentX) < Math.abs(prev - parentX) ? curr : prev)
});
arr.map(function(item, index, array){
(item === closest) && document.querySelector('[data-index="' + index + '"]').classList.add('active');
});
});
});
@import 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css';
html {
scroll-behavior: smooth;
}
body {
height: 1000px;
}
.pull-right{float:right}
.nav {
position: relative;
z-index: 2;
transform:translate(-5px, 80px);
}
.scrollspy-h-container {
overflow-x: scroll;
scroll-behavior: smooth;
width: 100%;
border-radius: .25rem;
}
.scrollspy-h {
position: relative;
width: calc(100% * 4);
}
.scrollspy-h>.scrollspy-h-item {
display: inline-block;
padding:5rem 0;
float: left;
width: calc(100% / 4);
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col p-4">
<nav class="pull-right">
<ul class="nav nav-pills pull-right" id="scrollspy-h">
<li class="nav-item">
<a class="nav-link text-light active" href="#item-1">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#item-2">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#item-3">Link 3</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#item-4">Link 4</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="row">
<div class="col">
<div class="scrollspy-h-container">
<div data-spy="scroll" data-target="#scrollspy-h" data-offset="88" class="scrollspy-h">
<div class="scrollspy-h-item bg-success" id="item-1">
<h2 class="display-4">Link 1</h2>
<p>This is the first pane that you'll see in the scroller</p>
</div>
<div class="scrollspy-h-item bg-warning" id="item-2">
<h2 class="display-4">Link 2</h2>
<p>This is the second pane that you'll see in the scroller</p>
</div>
<div class="scrollspy-h-item bg-info" id="item-3">
<h2 class="display-4">Link 3</h2>
<p>This is the third pane that you'll see in the scroller</p>
</div>
<div class="scrollspy-h-item bg-danger" id="item-4">
<h2 class="display-4">Link 4</h2>
<p>This is the fourth pane that you'll see in the scroller</p>
</div>
</div>
</div>
</div>
</div>
</div>