Materializecss scrollspy油门不工作
我正在用materializecss制作一个单页面的网站，我正在使用scrollspy在不同的部分之间滚动。
这一切都很好，但我希望它滚动得慢一些。然而，这个选项的油门似乎不起作用。
查看我的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;
}将throttle设置为10 (默认值为100)应该会使滚动速度变慢，但会继续应用默认速度。
回答 3
Stack Overflow用户
发布于 2020-02-12 08:14:18
首先要道歉的是，这没有回答你的问题，materialize throttle看起来要么坏了，因为文档显示你的例子看起来没问题，要么我也遗漏了一些东西:)
所以我对你的问题的问题是，为什么你要使用materialcss来滚动到id上的页面？
它是基本的浏览器功能-如果你在<a>元素中有href="#someid"，它会自动滚动到带有id="someid"的元素。
好的，你错过了平滑效果but...if，你想让事情变得平滑，你可以直接做css：
html {
scroll-behavior: smooth;
}或者，如果你想让事情变得更顺利，因为你正在使用jquery，这将适用于你的例子(删除scrollspy init js代码)，前提是你保持DOM不变，这样选择器$("#nav-mobile>li>a")就可以工作了：
$(document).ready(function(){
$("#nav-mobile>li>a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
},
2300, //time in miliseconds to scroll
function(){
window.location.hash = hash;
});
}
});
});如果你只是为了这个效果而使用materialize -你只是在页面加载上节省了177kb，否则它将不会与materialize发生任何冲突-只是不要初始化scrollSpy。
有关更多信息，请查看此链接：
https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2
Stack Overflow用户
发布于 2020-02-12 18:13:45
我还没有的答案，但我仔细研究了一下，我发现我们有两个问题之一：
1)节流选项确实损坏了
2)节流并不意味着控制滚动的速度
如果你看一下scrollspy组件：
https://github.com/Dogfalo/materialize/blob/master/js/scrollspy.js#L185
您将看到它使用了underscores.js中的throttle()：
取自* https://github.com/jashkenas/underscore的
- throttle()和getTime()
https://underscorejs.org/#throttle
是谁说的：
throttle_.throttle( function，wait，options)创建并返回传递函数的一个新的节流版本，当重复调用该函数时，实际上每等待毫秒最多调用一次原始函数。对于发生速度快于您所能跟得上的速率限制事件非常有用。
默认情况下，throttle将在您第一次调用该函数时立即执行它，并且，如果您在等待期间再次调用它任意次数，则在该时间段结束后立即执行该函数。如果您想要禁用前沿调用，请传递{leading: false}，如果您想要在后端禁用执行，请传递{trailing: false}。
可变节流= _.throttle(updatePosition，100)；$(窗口).scroll(节流)；
一般来说，当我在过去使用throttle时，它是为了在短时间内停止重复调用相同的函数。完全如上所述。因此，它可能不是用来控制滚动速度的。
我将在https://github.com/Dogfalo/materialize/issues上打开一个问题，并尝试获得一些澄清。注意这个空间。
Stack Overflow用户
发布于 2020-02-12 06:17:20
你有没有试过物化初始化？
这似乎对我很有效：
<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>https://stackoverflow.com/questions/57165412
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号