【问题标题】:Calling Window.scrollTo() on Android Mobile Browser causes TypeError: No function was found that matched the signature provided在 Android 移动浏览器上调用 Window.scrollTo() 会导致 TypeError:未找到与提供的签名匹配的函数
【发布时间】:2019-01-25 12:14:39
【问题描述】:

我有一个 React 项目 - 我将 onClick 附加到滚动到页面上特定元素的标题导航链接。我正在生成 React refs,并使用元素的 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}/>
    )}
}

预期行为: 窗口向下滚动到参考 Y 坐标,根据函数收到的“指令”反应状态变化(我省略了 setState 调用) 实际行为: 在大多数浏览器中工作。 在默认的 Android 浏览器中,我收到以下错误:

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

工作演示:https://worldsmilesdental.herokuapp.com/

请帮忙,我正在努力调试这个。我不知道如何调试移动浏览器,如何在移动 safari 或 android 浏览器上看到 console.log() 的输出?

【问题讨论】:

    标签: javascript android reactjs browser cross-browser


    【解决方案1】:

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

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

    【讨论】:

    • 感谢您的回答。 SmoothScroll polyfill 确实修复了崩溃。不幸的是,我没有 Mac。您知道有什么方法可以调试三星浏览器吗?
    猜你喜欢
    • 2020-09-15
    • 1970-01-01
    • 2019-05-20
    • 1970-01-01
    • 2011-08-13
    • 2018-01-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多