Materializecss scrollspy throttle not working

Question

I'm making a one page website with materializecss and I'm using scrollspy to scroll between sections.

This all works fine, but I would like it to scroll slower. However the option throttle for this doesn't seem to work.

Check out a codepen of my 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;
}

Setting throttle to 10 (default 100) should make the scrolling go slower, however the default speed keeps being applied.

score 0 · Answer 1 · answered Feb 12 '20 at 00:14

first to apologize this is not answer to your question, materialize throttle seems either broken since your example looks okay by documentation, or I'm missing something as well :)

So my question on your question is why are you using materialcss to scroll to page on id?

It's basic browser functionality - if you have href="#someid" in <a> element it will automatically scroll to element with id="someid".

Okay you're missing smooth effect but...if you want to smooth things out you could just do css:

html {
  scroll-behavior: smooth;
}

Or if you want to smooth things out even more since you are using jquery this will work on your example (remove scrollspy init js code) providing you keep DOM intact so selector $("#nav-mobile>li>a") works:

  $(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;
        });
      }
    });
  });

If you used materialize only for this effect - you just saved yourself 177kb on page load, if not it will work without any conflicts with materialize - just don't initialize scrollSpy.

Check this link for more info:

https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2

The asker is 'making a one page website with materializecss' - he's not just using materialize for the smooth scroll, which would be ridiculous. Scrollspy offers a lot more than smooth scroll - for instance, updating the current link based on position, as per the askers codepen demo. — Sean Doherty, Feb 17 '20 at 14:24

Sean Doherty · Answer 2 · 2020-02-12T13:08:55.070

I don't have the answer to this yet, but I had a dig around and it seems to me that we have one of two problems:

1) The throttling option is indeed broken

2) Throttling is not meant to control the speed of the scroll

if you take a look at the scrollspy component:

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

You'll see that it uses throttle() from underscores.js:

throttle() and getTime() taken from Underscore.js * https://github.com/jashkenas/underscore

https://underscorejs.org/#throttle

Who say that:

throttle_.throttle(function, wait, [options]) Creates and returns a new, throttled version of the passed function, that, when invoked repeatedly, will only actually call the original function at most once per every wait milliseconds. Useful for rate-limiting events that occur faster than you can keep up with.

By default, throttle will execute the function as soon as you call it for the first time, and, if you call it again any number of times during the wait period, as soon as that period is over. If you'd like to disable the leading-edge call, pass {leading: false}, and if you'd like to disable the execution on the trailing-edge, pass {trailing: false}.

var throttled = _.throttle(updatePosition, 100); $(window).scroll(throttled);

In general, when I've used throttle in the past, it is to stop repeatedly calling the same function in a short space of time. Exactly as stated above. So maybe it is not meant to control the speed of the scroll.

I'll open an issue over at https://github.com/Dogfalo/materialize/issues and try to get some clarification. Watch this space.

score -1 · Answer 3 · edited Feb 11 '20 at 23:28

-1

Have you tried, the materialize initialization?

This seems to work for me:

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

edited Feb 11 '20 at 23:28

Twenty

5,234
4
32
67

answered Feb 11 '20 at 22:17

Nicholas Rodrigues

1

Two things are wrong with this: If you copy this code into the provided codepen (ie replace his initialisation with yours), it breaks the scrollspy functionality altogether. Secondly, you have options passed as an argument - but no options are declared. This would throw an error in production. – Sean Doherty Feb 12 '20 at 09:58
you are completely correct!, i'm sorry for the wrong contribution, i'm a beginer. In fact what happened was that i unpretentiously used the basic browser functionality like the Pegla said. – Nicholas Rodrigues Feb 17 '20 at 13:24
It's an issue with the docs, not you, everyone gets caught out by it - I have raised it as an issue with the devs but it hasn't been acknowledged yet. 99% of the gitter channel is me saying 'take out options' – Sean Doherty Feb 17 '20 at 13:58

Materializecss scrollspy throttle not working

3 Answers3