I'm making a one page website with materializecss and I'm using scrollspy to scroll between sections.
This all works fine, but I would like it to scroll slower. However the option throttle for this doesn't seem to work.
Check out a codepen of my problem here!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- MATERIALIZECSS CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper black">
<a href="#!" class="brand-logo">One Page</a>
<ul id="nav-mobile" class="right">
<li><a href="#page1">Page 1</a></li>
<li><a href="#page2">Page 2</a></li>
<li><a href="#page3">Page 3</a></li>
</ul>
</div>
</nav>
</div>
<section id="page1" class="scrollspy onepager"></section>
<section id="page2" class="scrollspy onepager"></section>
<section id="page3" class="scrollspy onepager"></section>
<!-- JQUERY & MATERIALIZECSS JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
$('.scrollspy').scrollSpy({
scrollOffset: 64,
throttle: 10
});
});
</script>
</body>
</html>
CSS
*{
margin: 0!important;
padding: 0;
}
.onepager {
height: 100vh;
}
#page1 {
background: green;
}
#page2 {
background: yellow;
}
#page3 {
background: blue;
}
a.active {
background-color: #222;
}
Setting throttle to 10 (default 100) should make the scrolling go slower, however the default speed keeps being applied.
