Calling Window.scrollTo() On Android Mobile Browser Causes TypeError: No Function Was Found That Matched The Signature Provided

I have a React Project - I'm attaching an onClick to the Header Navigation Links that scroll to a particular element on the page. I am generating React refs, and using the Y position of the elements to input into a Window.scrollTo() function call.

Here is the code:

class Component extends React.Component {
    constructor(props) {
        this.menuRef = React.createRef()

    scrollToRef(ref, instructions, event, arg2) {
        if (event) event.preventDefault()

        let pageOffSet = 200

            if (this.state.topOfPage) {
                pageOffSet = 200 
            } else if (!this.state.topOfPage) {
                pageOffSet = 150

            window.scrollTo({top: (ref.current.offsetTop - pageOffSet), behavior: "smooth"})

     // Pseudocode...
    <button onClick={() => this.scrollToRef(this.menunRef, "contact", event)}
    <div ref={this.menuRef}/>

Expected Behavior: Window scrolls down to ref Y coordinates, react state changes according to "instructions" recieved by function (I omitted setState calls) Actual Behavior: Working in most browsers. In default Android browser, I get the following error: enter image description here

Component Full Code on Github:

Working Demo:

Please help, I am at my wits end trying to debug this. I have no idea how to debug mobile browsers, How can I see the output of console.log() on a mobile safari or android browser?



That’s a new-ish signature for scrollTo, it used to only accept scrollTo( x, y ) but now it can also accept an object. The android browser must not know about the new version. You can use a polyfill to patch it.

if you have a Mac you can debug iOS Safari through desktop Safari: