Cannot read property 'top' of undefined

[apair]

Steps to reproduce ;

1. When the page is not fully loaded scroll down

Expected Result

1. No error is thrown

Actual Result

1. bunch of error that said :

numscroller-1.0.js:46 Uncaught TypeError: Cannot read property 'top' of undefined
at HTMLSpanElement. (numscroller-1.0.js:46)
at Function.each (jquery.min.js:2)
at w.fn.init.each (jquery.min.js:2)
at w.fn.init.$.fn.scrollzip (numscroller-1.0.js:41)
at numscroller-1.0.js:15
at dispatch (jquery.min.js:2)
at y.handle (jquery.min.js:2)
(anonymous) @ numscroller-1.0.js:46
each @ jquery.min.js:2
each @ jquery.min.js:2
$.fn.scrollzip @ numscroller-1.0.js:41
(anonymous) @ numscroller-1.0.js:15
dispatch @ jquery.min.js:2
y.handle @ jquery.min.js:2

[robwent]

I'm getting the same error.

The same code works on a simple html page, but I get the error when I use the code within a cms.

I'm trying to get this to work in a Joomla module and the site is loading mootools so I'm guessing it's a conflict with that.

[robwent]

In my case this turned out to be something with the window resize event handler.

I had to remove resize here: https://github.com/tinywall/numscroller/blob/gh-pages/numscroller-1.0.js#L14

Then it worked.

[feichter]

Removing the word 'scroll' from this line ' $(window).on("load scroll resize", function(){' works.

But, why?

[robwent]

I think the problem is that both the part that adds the div under the body tag and the part that checks for that div both fire at the same time (onload).

I ran into this again after my first hack and I think it's down to the amount of js the cms is trying to load and the time before the events fire.

I fixed it this time by adding the div under the body tag on document ready and then checking for it on document load.

I'll add a pull request and if anyone with the issue can confirm the fix works, hopefully, it can be merged.

@feichter @apair are you still using the script and able to test the updates?

[robwent]

File to test https://github.com/robwent/numscroller/blob/undefined-top-fix/numscroller-1.0.js

[mhmdAmin]

I came up with this problem and my solution is:

1- I added the div as showen here under the body tag.

<div style='position:fixed;top:0px;left:0px;width:0;height:0;' id='scrollzipPoint'></div>
right under the body tag.

2- Then modified the js code to check if the ### div#scrollzipPoint is not loaded then add this div by js.

the modifide code is showen here

original code:

========
$.fn.scrollzipInit = function () { $('body').prepend("<div style='position:fixed;top:0px;left:0px;width:0;height:0;' id='scrollzipPoint'></div>"); };

Modified code:

========

   ` $.fn.scrollzipInit = function () {
        if (!($('#scrollzipPoint'))) {
            $('body').prepend("<div style='position:fixed;top:0px;left:0px;width:0;height:0;' id='scrollzipPoint'></div>");
        }
    };`

_I hope_that helpful for you

[furyuri]

Thanks, @mhmdAmin for the fix! I used it with Drupal 8.9.13 and your fix solved/cleared the error.
I also tried the solution that @robwent linked to, but still got the error.