Calling Window.scrollTo() on Android Mobile Browser causes TypeError: No function was found that matched the signature provided
Calling Window.scrollTo() on Android Mobile Browser causes TypeError: No function was found that matched the signature provided
我有一个 React 项目 - 我将 onClick
附加到滚动到页面上特定元素的页眉导航链接。我正在生成 React 引用,并使用元素的 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}/>
)}
}
预期行为:
Window 向下滚动到 ref Y 坐标,根据函数收到的 "instructions" 反应状态变化(我省略了 setState 调用)
实际行为:
在大多数浏览器中工作。
在默认 Android 浏览器中,出现以下错误:
Github 上的组件完整代码:https://github.com/Mikhail-MM/wsd-dental/blob/master/src/components/TabletSite.js
工作演示:https://worldsmilesdental.herokuapp.com/
请帮忙,我已经无计可施了。我不知道如何调试移动浏览器,如何在移动 safari 或 android 浏览器上查看 console.log()
的输出?
这是 scrollTo
的新签名,它以前只能接受 scrollTo( x, y )
但现在它也可以接受对象。 android 浏览器一定不知道新版本。您可以使用 polyfill 对其进行修补。
如果您有 Mac,您可以通过桌面 Safari 调试 iOS Safari:https://appletoolbox.com/2014/05/use-web-inspector-debug-mobile-safari/
我有一个 React 项目 - 我将 onClick
附加到滚动到页面上特定元素的页眉导航链接。我正在生成 React 引用,并使用元素的 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}/>
)}
}
预期行为:
Window 向下滚动到 ref Y 坐标,根据函数收到的 "instructions" 反应状态变化(我省略了 setState 调用)
实际行为:
在大多数浏览器中工作。
在默认 Android 浏览器中,出现以下错误:
Github 上的组件完整代码:https://github.com/Mikhail-MM/wsd-dental/blob/master/src/components/TabletSite.js
工作演示:https://worldsmilesdental.herokuapp.com/
请帮忙,我已经无计可施了。我不知道如何调试移动浏览器,如何在移动 safari 或 android 浏览器上查看 console.log()
的输出?
这是 scrollTo
的新签名,它以前只能接受 scrollTo( x, y )
但现在它也可以接受对象。 android 浏览器一定不知道新版本。您可以使用 polyfill 对其进行修补。
如果您有 Mac,您可以通过桌面 Safari 调试 iOS Safari:https://appletoolbox.com/2014/05/use-web-inspector-debug-mobile-safari/