Открытие и увольнение клавиатуры смещает точку зрения на моем сайте, сделанную React

Question

Это то, что происходит, когда я открываю и закрываю клавиатуру

Всякий раз, когда я открываю клавиатуру, точка обзора смещается вниз.Точно так же, когда я отклоняю клавиатуру, вся точка обзора перемещается вверх и смещается от элемента, на котором она была сфокусирована.Чтобы несколько свести на нет эффекты, я прикрепил обработчики событий к функциям onFocus и onBlur, чтобы сдвинуть div обратно в представление.

Я хочу предотвратить перемещение точки обзора вверх и вниз с помощью клавиатуры, и я незнать, в чем заключается проблема.

Мое приложение React структурировано в следующей иерархии:

Файл ниже - это основной файл App.js, который является первым монтируемым компонентом

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';

import Home from './containers/Home';

class App extends Component {

    constructor(props) {
        super(props);
        // create the store
        this.store = configureStore();
    }

    render() {
        return (
            <Provider store = {this.store}>
                <Home/>
            </Provider>
        );
    }
}

export default App;

Вторым идет Home.js

// Smart container component which represents the Home view

import React, { Component } from 'react';


import HorizontalLayout from './HorizontalLayout';

class Home extends Component {

    render() {
        return (
            <HorizontalLayout/>
        );
    }
}

export default Home;

Третьим идет HorizontalLayout.js

import React, { Component } from 'react';

import View from './View';
import Introduction from './Introduction';
import Header from './Header';
import Segments from '../components/Segments';
import NotificationWrapper from './NotificationWrapper';
import Particles from '../components/Particles';

class HorizontalLayout extends Component {
    render() {
        return (
            <div>
                <Header/>
                <NotificationWrapper/>
                <View>
                    <Particles/>
                    <Introduction/>
                    <Segments/>
                </View>
            </div>
        );
    }
}

export default HorizontalLayout;

Div Contact me находится в компоненте Segments (который не имеет стилей)), который заключен в элемент View, который имеет следующий CSS:

const styles = {
    container: {
        position: 'fixed',
        backgroundColor: colors.background,
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        zIndex: 0,
        overflowY: 'scroll',
        overflowX: 'hidden',
    }
}

Стили элемента div me contact следующие:

const styles = {
    container: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
    },
    email: {
        height: 30,
        marginBottom: '4%',
        fontFamily: 'arial',
    },
    message: {
        fontFamily: 'arial',
    }
}