Materializecss scrollspy节流阀不起作用

问题描述 投票:1回答:1

我正在使用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)会降低滚动速度,但是默认速度会继续应用。

javascript html materialize scrollspy
1个回答
0
投票

您是否尝试过,实现初始化?

这似乎对我有用:

<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>

((对所有可能的英语错误,我都没有发言权,我很抱歉

© www.soinside.com 2019 - 2024. All rights reserved.