Question

我有一个非常简单的网站，该网站的主体应滚动，以使地址栏不再可见。从this主题看来，只需呼叫以下人员即可解决问题：

window.scrollTo(0,1)

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

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()-我尝试了不同的偏移量来滚动，但似乎没有一个起作用？

我也尝试过修改index.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>

但这似乎也不起作用。

我现在注意到（感谢您的评论）这是由于对路由器导入的反应。如果我删除导入，则“正常”-应用程序与react-router紧密耦合，那么如何“修复”此问题？

Answer 1

您的代码存在问题

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

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

您看不到的效果是因为window.scrollTo(0, 1)在pixel中接受了参数，因此您的页面可能垂直滚动1px而看不到。 Ref。

您可以使用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>
  )
}

Demo

Answer 2

这是一个单行代码解决方案，可以正常工作。：）

只需将其放在您的index.html中！

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

或者您可以将其放在您的app.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;

干杯：）

如何在React应用中的移动设备上“隐藏地址栏”？

2 个答案: