【发布时间】: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