我正在使用materializecss创建一个一页网站,并且使用scrollspy在各个部分之间滚动。
这一切都很好,但是我希望它滚动得慢一些。但是,此选项油门似乎不起作用。
检查我的问题的代码笔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;
}
将油门设置为10(默认为100)会降低滚动速度,但是默认速度会继续应用。
您是否尝试过,实现初始化?
这似乎对我有用:
<script type="text/javascript" src="js/materialize.js">
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.scrollspy');
var instances = M.ScrollSpy.init(elems, options);
throttle: 50;
});
</script>
((对所有可能的英语错误,我都没有发言权,我很抱歉