在Android移动浏览器上调用Window.scrollTo()导致TypeError:找不到与提供的签名匹配的函数 [英] Calling Window.scrollTo() on Android Mobile Browser causes TypeError: No function was found that matched the signature provided

问题描述

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

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.

这是代码:

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浏览器中，出现以下错误:

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:

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

Component Full Code on Github: https://github.com/Mikhail-MM/wsd-dental/blob/master/src/components/TabletSite.js

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

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

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?

推荐答案

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

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.

如果您使用的是Mac，则可以通过桌面Safari调试iOS Safari:

if you have a Mac you can debug iOS Safari through desktop Safari: https://appletoolbox.com/2014/05/use-web-inspector-debug-mobile-safari/

这篇关于在Android移动浏览器上调用Window.scrollTo()导致TypeError:找不到与提供的签名匹配的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！