如何在 react 应用程序中在移动设备上"hide the address bar"？

好吧，我有一个非常简单的网站，网站的正文应该滚动，以便地址栏不再可见。从这个话题来看，似乎简单地调用 follwing 应该可以解决问题：

window.scrollTo(0,1)

但是在我的反应应用程序中，这根本不起作用，该应用程序是：

import * as React from 'react';
import {Route, Router} from 'react-router';
class App extends React.Component<PropTy> {
componentDidMount() {
console.log('ok');
window.scrollTo(0, 1);
}
render() {
return (<div style={{height: '100vh', position: 'relative'}}>
text
</div>);
}
}
export default App;

我可以手动向下滚动(在移动设备上)。但是它不会自动执行此操作 - 但我确实在控制台中看到"确定"。

index.html 和 manifest.json 与默认的 create-react-app 几乎没有变化：

<!DOCTYPE html>
<!--suppress HtmlUnknownTarget -->
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#7B0000">
<meta name="Description" content="Spots platform, event calendar, enroll">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<title>AllSports</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root" ></div>
</body>
</html>

是什么导致浏览器忽略scrollTo()- 我已经尝试了不同的滚动偏移量，但它们似乎都不起作用？

我也尝试修改索引.html：

<!DOCTYPE html>
<!--suppress HtmlUnknownTarget -->
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#7B0000">
<meta name="Description" content="Spots platform, event calendar, enroll">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<title>AllSports</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root" style="height: 100vh; position: relative;"></div>
</body>
</html>

但这似乎也行不通。

我现在注意到(感谢您的评论)这是由于反应路由器导入。如果我删除导入，它"有效"。- 然而，该应用程序与反应路由器紧密耦合，那么我将如何"修复"这个问题？

你的代码问题是，

componentDidMount() {
console.log('ok');
window.scrollTo(0, 1);
}

componentDidMount仅在组件首次加载时执行一次，并且不会执行任何连续渲染。因此，此代码可能会执行一次。

您无法看到的效果是因为，window.scrollTo(0, 1)pixel中接受参数，因此您的页面可能会垂直滚动1px而您无法看到它。参考资料

您可以使用scrollIntoView和ref来实现这一点，

import React, {useRef, useEffect} from 'react'
import ReactDOM from 'react-dom'
function App() {
const scrollInto = useRef(null)
useEffect(() => {
scrollInto.current.scrollIntoView()
})
return (
<div>
<h2>Header</h2>
<div ref={scrollInto}>Scroll till here</div>
<h2>
Below dummy text is to get scroll on page so tht our code will work.
</h2>
<div>
More data here
</div>
</div>
)
}

演示

这是一个运行良好的单行代码解决方案。 :)

只需将其放在索引下方即可.html！

<meta name="apple-mobile-web-app-capable" content="yes" />

或者你可以把它放在你的应用程序中.js代码，就像下面的待办事项列表应用示例~

import React, { useState, useCallback, useRef } from 'react';
const App = () => {
const [todos, setTodos] = useState([
{
id: 1,
text: 'todo item one'
},
{
id: 2,
text: 'todo item two'
},
{
id: 3,
text: 'todo item three'
}
]);

const nextId = useRef(4);
const onInsert = useCallback(
text => {
const todo = {
id: nextId.current,
text,
checked: false
};
setTodos(todos.concat(todo));
nextId.current += 1;
},
[todos],
);
return (
<div>
<meta name="apple-mobile-web-app-capable" content="yes" />
<TodoTemplate>
<TodoInsert onInsert={onInsert} />
<TodoList todos={todos} />
</TodoTemplate>
</div>
);
}
export default App;

干杯:)

相关内容

最新更新

热门标签：