个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在使用 materializecss 制作一个单页网站，我正在使用 scrollspy 在各部分之间滚动。
一切正常，但我希望它滚动得慢一些。然而，选项 throttle 似乎不起作用。
查看我的问题的代码笔 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)应该会使滚动速度变慢，但会继续应用默认速度。
最佳答案
首先道歉，这不是您问题的答案，因为您的示例在文档中看起来没问题，所以 materialize throttle 似乎坏了，或者我也遗漏了一些东西:)
所以关于你的问题，我的问题是你为什么使用 materialcss 滚动到 id 上的页面？
这是基本的浏览器功能 - 如果您有 href="#someid"在 <a>元素它将自动滚动到元素 id="someid" .
好吧，你缺少平滑效果，但是......如果你想要平滑效果，你可以只做 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;
});
}
});
});
如果您仅为实现此效果而使用实体化 - 您只是在页面加载时为自己节省了 177kb，否则它将在不与实体化发生任何冲突的情况下工作 - 只是不要初始化 scrollSpy。
查看此链接以获取更多信息:
https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2
关于javascript - Materializecss scrollspy throttle 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57165412/
26
4
0
我正在制作一个单页网站，我正在尝试让导航栏链接反射(reflect)您所在页面的哪个部分。我试过通过 HTML 使用它但没有成功。我在包含不同部分的容器上有这段代码 并且正文设置为相对的。 因为那行
我正在使用 Scrollspy 的 Jquery 独立实现。我在这里有一个关于我的问题的 jsfiddle 示例:http://jsfiddle.net/2acyu/66/ 当页面向下滚动到 3 个部
我正在制作作品集，但我在使用 Bootstrap 4 时遇到了 2 个问题: 将导航栏链接放在右侧 还有 Bootstrap Scrollspy。 有人可以帮我解决以上两个问题吗？ 我已经尝试过来自
我已经在我的应用程序中实现了 Scrollspy。因为我在我的应用程序中使用了 knockout 框架，用户可以在一个部分中添加最多 15 行。所以如果他们添加 15 行，滚动 spy 高度就会受到影
您好，我在使用 Bootstrap Scrollspy 时遇到了两个问题 1- 滚动时，事件类不会在我想要加上的位置突出显示 section4 由于某些奇怪的原因没有激活，见此处: Scrollspy
我似乎无法让 scrollspy 处理隐藏元素。 我将 data-spy="scroll"和 data-target=".classOfNavWrapper"放在 body 上，它并没有像文档暗示的那
如您在此示例中所见，Bootstrap Scrollspy 会跳过导航，但实际上并没有像预期的那样工作。错误的元素是获取 .active 类。 $('.spycontent').scrollspy({
我在我的网站上使用 materializecss scrollspy 组件，scrollspy 链接有效。但唯一困扰我的是 scrollspy 的目录没有跟随滚动位置。
我需要 JQuery 方面的帮助，我相信这可能是显而易见的解决方案，但我不知道如何去做。关于滚动页面上的导航栏，我希望导航栏上的链接之一转到外部页面(而不是页面中的某个部分)。它会这样做，但它会弄乱滚
我试图在我的网站中添加 scrollspy 东西，但目前还没有用。当我在那个部分时，它不会突出显示导航栏中的链接，这是 scrollspy 所做的，所以我无法找出问题所在。我已经粘贴了代码并帮助我弄清
我一直在努力建立我的网站，我真的很想在我的页面上有一些字体很棒的字形，当我滚动时它们会淡入。问题是我不太了解 Spyscroll 或如何使用它。 这是我的代码，也许任何人都可以帮助我。 #sectio
Scrollspy 同时突出显示两个目标，这不是我想要的。我希望它只突出显示一个。它确实突出显示了一个，但是当在两个元素之间滚动时它突出显示了两个。 CSHTML var guid = Guid.Ne
scrollspy 上的事件部分未在导航栏上更新。我不确定我是否缺少脚本或代码中是否有错误。 脚本 /* Navbar Spyscroll */ $('body').scrollspy
scrollspy 效果正常，但突然停止工作。我的意思是当 href 链接像这样 href="#id"时，在滚动单页站点时识别菜单的事件元素。但是当 href 像“/home#id”一样给出时它停止工
你好网络爱好者，我希望你能帮我解决一个问题。 我正在使用 bootstrap 创建一个网站，该网站使用 scrollspy 通过导航栏导航到页面的某些部分。我可以让 URL 不显示的唯一方法 "#se
您好，当我启用移动菜单折叠时，它会停止 scrollspy 的工作。 它们都可以单独工作但不能一起工作，这是 bootstrap 的限制吗？ 这是我的导航栏代码:
我一直在使用来自 startbootstrap.com 的名为“创意”的模板，如图所示 here . 因为最后一节太短，当它到达页面底部时，它永远不会被 scrollspy 突出显示。但是，正如您在
首先，如果我重复其他地方发布的内容，我深表歉意。我一直在研究其他人为他们的问题找到的解决方案，并且我已经实现了(或者我认为)他们发现的东西，但我正在开发的网站仍然没有达到预期的效果。 所以，我正在处理
我有一个复选框，当选中该特定复选框时，它会在上面显示一些文本: $('#pck-94').click(function() { $('#pico-info').toggle(this.ch
fiddle :http://jsfiddle.net/bVLBL/ “事件”类未应用于正确的链接。有什么解决办法吗？ HTML: Introdu
我是一名优秀的程序员,十分优秀！