Question

我正在使用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）会降低滚动速度，但是默认速度会一直保持不变。

Answer 1

首先道歉，这不是您的问题的答案，实现节制似乎已损坏，因为您的示例在文档中看起来还可以，或者我也缺少一些东西：）

所以我对您的问题的疑问是，为什么要使用materialcss滚动到id上的页面？

这是基本的浏览器功能-如果您在href="#someid"元素中有<a>，它将自动滚动到带有id="someid"的元素。

好的，您缺少平滑效果，但是...如果想平滑处理，则可以执行CSS：

html {
  scroll-behavior: smooth;
}

或者如果由于使用jquery而希望进一步简化操作，那么只要保持DOM不变，选择器$("#nav-mobile>li>a")就可以工作在您的示例中（删除scrollspy init js代码）：

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

Answer 2

我对此没有的答案，但是我已经摸索了一下，在我看来我们有两个问题之一：

1）节流选项确实坏了

2）节流无意控制滚动速度

如果您看一下scrollspy组件：

https://github.com/Dogfalo/materialize/blob/master/js/scrollspy.js#L185

您将看到它使用了underscores.js中的油门（）：

throttle（）和getTime（）来自Underscore.js * https://github.com/jashkenas/underscore

https://underscorejs.org/#throttle

谁这么说：

throttle_.throttle（function，wait，[options]）创建并返回一个调用函数的新的，受限制的版本重复，最多只会实际调用一次原始函数每等待毫秒。对于以下情况的限速事件很有用发生的速度超出了您的追赶速度。

默认情况下，油门将在您调用它后立即执行该功能第一次，并且，如果您再次调用它多次在等待期间内，只要该期间结束。如果你想要禁用前沿通话，请传递{lead：false}，如果愿意想要禁用后缘的执行，请传递{trailing： false}。

var节流= _.throttle（updatePosition，100）; $（window）.scroll（throtled）;

通常，当我过去使用过节流阀时，就是要在很短的时间内停止重复调用同一函数。完全如上所述。因此，也许这并不意味着要控制滚动的速度。

我将在https://github.com/Dogfalo/materialize/issues上发布一个问题，并尝试进行澄清。观看此空间。

Answer 3

您是否尝试过，实现初始化？

这似乎对我有用：

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

Materializecss scrollspy节气门不起作用

3 个答案: