make horizontal scroll when scroll the page - navbar

Question

I have navbar for all the sections on the site.
when it's mobile view this navbar is one line with a scroll.
I want to scroll this navbar auto when I scroll the page down to the section.
can I achieve that without using sliders?
.wrapper {
width: 360px;
height: 720px;
border: 1px solid #000;
}
ul {
list-style-type: none;
padding: 10px 0;
margin: 10px 0;
display: flex;
background: #ccc;
}
li {
margin: 0 8px;
}
<div class="wrapper">
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>

Answer 1

html, body {
margin: 0px;
padding: 0px;
}
header {
width: 100%;
position: fixed;
background-color: rgba(0, 0, 0, 0.7);
}
nav {
max-width: 700px;
margin: 0 auto;
padding: 4px;
}
nav a {
color: white;
padding: 2px;
}
.content-container {
max-width: 700px;
margin: 0 auto;
}
.section-content {
padding: 10px 0px;
}
.flex-container {
display: flex;
justify-content: space-around;
}
.flex-column {
width: 150px;
height: 150px;
background-color: yellow;
margin: 2.5px;
display: inline-block;
}
<header>
<nav>
Section1
Section 2
Section 3
Section 4
</nav>
</header>
<div class="content-container">
<div class="section-content" id="first">
<h3>Section 1</h3>
<div class="flex-container">
<p class="flex-column">Hello world!</p>
<p class="flex-column">Hello world!</p>
<p class="flex-column">Hello world!</p>
<p class="flex-column">Hello world!</p>
</div>
</div>
<div class="section-content" id="second">
<h3>Section 2</h3>
<div class="flex-container">
<p class="flex-column">Hello world!</p>
<p class="flex-column">Hello world!</p>
<p class="flex-column">Hello world!</p>
<p class="flex-column">Hello world!</p>
</div>
<p>Item of div section 2.</p>
</div>
<div class="section-content" id="third">
<h3>Section 3</h3>
<p>Item of div section 3.</p>
</div>
<div class="section-content" id="fourth">
<h3>Section 4</h3>
<p>Item of div section 4.</p>
</div>
</div>
<script type = "text/javascript">
$(document).ready(function(){
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').animate({
'scrollTop': $target.offset().top
}, 1000, 'swing');
});
});
</script>
Working code by me