在Android移动浏览器上调用Window.scrollTo()导致TypeError:找不到与提供的签名匹配的函数

时间:2018-08-18 21:08:26

标签: javascript android reactjs browser cross-browser

我有一个React项目-我将onClick附加到滚动到页面上特定元素的标题导航链接。我正在生成React ref,并使用元素的Y位置输入到Window.scrollTo()函数调用中。

这是代码:

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"})
    }

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

预期的行为: 窗口向下滚动至ref Y坐标,根据功能收到的“指令”来响应状态变化(我省略了setState调用) 实际行为: 在大多数浏览器中均可使用。 在默认的Android浏览器中,出现以下错误: enter image description here

Github上的组件完整代码:https://github.com/Mikhail-MM/wsd-dental/blob/master/src/components/TabletSite.js

正在运行的演示:https://worldsmilesdental.herokuapp.com/

请帮助,我正竭尽全力尝试对此进行调试。我不知道如何调试移动浏览器,如何在移动浏览器或Android浏览器上查看console.log()的输出?

1 个答案:

答案 0 :(得分:4)

这是scrollTo的新签名,它过去仅接受scrollTo( x, y ),但现在也可以接受对象。 android浏览器一定不知道新版本。您可以使用polyfill对其进行修补。

如果您使用的是Mac,则可以通过桌面Safari调试iOS Safari:https://appletoolbox.com/2014/05/use-web-inspector-debug-mobile-safari/