ScrollTo Method Issue

Ask the community
1

Hello Wix Team :raised_hand_with_fingers_splayed:

I’ve noticed a weird behavior when using the scroll to the method, especially when assigning the scrollTo method to another method, for example:

const element = $w('#element');
const scrollTo = $w('#element').scrollTo;

element.scrollTo(); // It works
scrollTo(); // Returns an error

The returned error:

Cannot read property ‘getComp’ of undefined

Any idea?

Ahmad

2

Whilst I am very much a Velo newbie myself - I have found that, in general, the error message “Cannot read property “someProperty” of undefined” seems to be a Javascript error which gets raised by your browser whenever it parses some script that attempts to access (or modify) a page element (object) which “has not yet been created” in the browser.
Maybe you could try moving your code and placing it inside the Web Page’s “On Ready” event handler. This way, you can know that all the page elements have been created and registered in the brower’s DOM - before you attempt to interact with them.??

3

Thank you for your reply, however, the method works when accessing it directly, and returns an error when calling the method after assigning it to a constant, it has nothing to do with the item being rendered or not.

4

I’m probably clutching at straws here, but I wonder is scrollTo is a reserved word in Velo? Try kScrollTo perhaps?

Or, try var instead of Const maybe?

5

Or … Maybe you are trying to use a Constant as a Function? Maybe assigning a function to a Constant is not the way it works? Maybe it has to be done as a function declaration?

6

There’s no such thing as reserved keywords in Velo, you can use whatever you want, and in terms of the purpose, there won’t be a difference between var, let, or const. var is deprecated BTW and got replacd with let.

7

A variable can store any type of data, including functions, it’s completely fine.

8

@ahmadnasriya this is not an issue, it’s because you call the function scrollTo by itself and it should be bound to an object

Checkout : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind

you can probably solve that issue with

const element =$w('#element');
const scrollTo =$w('#element').scrollTo;

const scrollToBound = scrollTo(element);

scrollToBound();// To be tested

Another read: Function binding

9

Thank you @plomteuxquentin , didn’t think of that :grin: